@charset "utf-8";

.wrap{overflow: hidden;}
.header{background:#222;border-top:1px solid #2e2e2e;}
.header .inner{overflow: hidden;width:934px;margin:0 auto;padding:15px 33px 10px;}
.logo{float:left;margin-top:-7px}
.logo a{font-family:'arial black';font-size:21px;;color:#fff;text-decoration: none;}
.nav{float:right;}
.nav li{float:left;margin-left:135px}
.nav li a{color:#ccc;text-decoration: none;font-family:'Poppins';font-size:12px;}
.nav li a:hover{color:#fff}

.spot{position:relative;width:100%;height:448px;}
/*.spot li{position:absolute;top:0;left:50%;margin-left:-960px}*/
.spot .bx-pager{position:absolute;bottom:66px;left:50%;z-index:100;margin-left:-21px;}
.spot .bx-pager-item{float:left;width:8px;height:8px;margin:0 3px;}
.spot .bx-pager-link{display:block;background:url(../img/btn_paging_slide.png) no-repeat 100% 0;text-indent:-999px;}
.spot .bx-pager-link.active{background-position:0 0}
.spot .bx-controls-direction{position:relative;top:-439px;margin:0 auto;max-width:1200px}
.spot .bx-prev{overflow: hidden;position:absolute;top:195px;left:0;z-index:100;width:60px;height:60px;text-indent:-999px;background:url(../img/btn_prev_slide.png) no-repeat 0 0;}
.spot .bx-next{overflow: hidden;position:absolute;top:195px;right:0;z-index:100;width:60px;height:60px;text-indent:-999px;background:url(../img/btn_next_slide.png) no-repeat 0 0;}
.spot-slider li img{position:relative;left:50%;margin-left:-960px;}

.portfolio {position:relative;padding:46px 0;background:#fff}
.portfolio .h-tit{margin:0 0 66px;text-align:center;}
.portfolio #container_title{display:none}

.aboutme{background:#f2f2f2}
.aboutme .inner{padding:46px 0 50px}
.aboutme .h-tit{margin:0 0 44px;text-align:center;}
.aboutme-introduce{overflow: hidden;width:329px;margin:0 auto;}
.aboutme-introduce dl{overflow: hidden;margin-top:8px}
.aboutme-introduce dl:first-child{margin-top: 0;}
.aboutme-introduce dl dt{float:left;}
.aboutme-introduce dl dt{width:130px;margin-right:13px;color:#222;font-size:13px;font-weight: bold;font-family:'Source Sans Pro'}
.aboutme-introduce dl dd{color:#7b7b7b;margin-left:143px;font-size:13px;font-family:'NanumGothic';line-height:18px;}

.aboutme-indetity{overflow: hidden;width:100%;max-width:890px;margin:55px auto 0;border-top:1px solid #dfdfdf;}
.aboutme-indetity-inner{border-top:1px solid #fff;padding:57px 0 0}
.aboutme-indetity ul{overflow: hidden;text-align:center}
.aboutme-indetity li{display:inline-block;margin:0 30px 60px;*display:inline;vertical-align:top}
.aboutme-indetity li p{width:195px;text-align:left;line-height:18px;font-size:12px}

.contact{position:relative;height:599px;/*background:#000 url(../img/bg_contact.jpg) repeat 0 0;background-attachment: fixed*/}
.wrap:after {background: #000 url(../img/bg_contact.jpg) repeat 50% 0;
    content: '';position: fixed;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: -1;/* bottom: 0; */;}
.contact .inner{width:796px;margin:0 auto;padding:46px 0 0;}

.contact-info{overflow: hidden;margin-bottom:50px}
.contact-contact{float:left;}
.contact-phone{float:right;}

.contact-form{overflow: hidden;}
.contact-input{float:left;margin-left:51px}
.contact-input:first-child{margin-left: 0;}
.contact-input label{display:block;margin-bottom:3px;color:#fff;font-weight: bold;font-size:13px;}
.contact-input input{}
.contact-input--large{margin:18px 0 44px;}
.contact .btn-area{clear: both;text-align:center;}
.footer{height:80px;background:#fff;text-align:center;line-height:80px}

.portfolio-content{zoom:1;width:995px;;margin:0 auto}
.portfolio-content-inner{margin-left:-16px}
.portfolio-content:after{content:'';display:block;clear: both;}
.portfolio-item{overflow: hidden;float:left;width:321px;height:285px;margin:16px 0 0 16px}
.portfolio-img{margin-bottom:14px}
.portfolio-img img{max-width:100%}

#bo_gall{max-width:1030px;margin:0 auto;text-align:center;}
#bo_gall .gall_li{margin:0 0 35px 0;padding:15px;box-sizing:border-box;}
#bo_gall .gall_href a{position:relative;display:block}
#bo_gall .gall_href img{max-width:100%!important;height:auto}
/*#bo_gall .gall_href .mask{position:absolute;top:0;right:0;bottom:0;left:0;transition:all 100ms ease-in-out;opacity:0;text-align:center;background:url(../img/architecture-1.jpg);}*/
#bo_gall .gall_href .mask{position:absolute;top:0;right:0;bottom:0;left:0;transition:all 100ms ease-in-out;text-align:center;background:url(../img/architecture-1.jpg);}
#bo_gall .gall_con:hover .mask{display:block;background:#000;opacity:.3;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";}

/*#bo_gall .gall_href .mask:after{display:none;}
#bo_gall .gall_href:hover .mask:after{display: inline-block;content: 'CLICK';position:absolute;top: 50%;left:44%;;padding:2px 3px 1px;color: white;background: #000;vertical-align: inherit;text-align: center;height: 18px;border: 1px solid #fff;}*/



#gall_ul{display:inline-block;}

.board-name{display:none}
.board-date{display:none}
.board-hit{display:none}

.h-tit-border{position:relative;font-size:20px;font-family:'Arial';color:#222;letter-spacing:5px}
.h-tit-border:after{content:'';position:absolute;bottom:-24px;left:50%;width:21px;height:3px;margin-left:-10px;background:#ff3a1a}
.h-tit-sub{margin-bottom:25px;text-align:center;font-size:85px;font-family:'arial';color:#222}

.pg_wrap{display:block;}
.pg_wrap .pg_page{margin:0 3px;border-radius:5px;background:#fcfcfc}
.pg_wrap .pg_current{height:23px;margin:0 3px;border-radius:5px;line-height:23px}
.paging{display: none;text-align:center;}
#bo_cate_on{color:#ff0000;}
#bo_v{margin:0;padding:0;}
#bo_v_table{display: none;}

#bo_v_info{display: none;}
#bo_v #bo_vc_w{display: none;}
#bo_v #bo_vc{display: none;}
#bo_v_top{display:none}
.bo_v_com li{display:none;}
#bo_v .btn_confirm{display: none;}
#bo_v .tbl_frm01.tbl_wrap{display: none;}
#bo_v #bo_v_title{display: none;text-align:center;}
#bo_v #bo_v_bot{display: none;padding:0 150px;}
#bo_v #bo_v_con{display: none;text-align: center;}
a.btn_b02{color:#fff!important;}
#bo_cate_ul li #bo_cate_on{font-weight: bold;}
/*#bo_sch{display: none;}*/
#bo_v_img{margin-bottom:0!important}
#bo_v_img img{margin-bottom:0!important}
.gall_li {width:33%;visibility: hidden}

.featherlight{bottom:-1px!important;}
.featherlight-content title{display: none!important;}
script.featherlight-inner {display: none!important;}
.featherlight .featherlight-content{padding:0!important;border:0!important;}
.ly-open{overflow:hidden}
.ly-open .wrap{overflow: hidden;}
.featherlight-content .featherlight-close-icon.featherlight-close{display: none;top:15px;;right:15px;overflow: hidden;width:32px;height:32px;background:url(../img/btn_close_layer.png) no-repeat 0 0;text-indent:-999px}
#bo_v_img a{display:block;margin-top:50px}
#bo_v_img a:first-child{margin-top:0}
#bo_v_img:after{content:'';position: fixed;top:10px;right:25px;width:32px;height:32px;background: url(../img/btn_close_layer.png) 50% 50% no-repeat}
#bo_gall .gall_text_href{text-align:left;}

@media screen and (max-width: 800px) {
    #bo_gall .gall_li {float: none;width:100%;margin:0 auto 20px!important;padding:0;clear:none!important;}
    .gall_text_href{overflow: hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;line-height:18px}
    #gall_ul{margin:0;}
    #bo_list_total{float:none;padding-left:10px;text-align:left;}
    .h-tit-sub{font-size:46px}
    .contact-info{padding:0 10px;}
    .contact-contact{float:none}
    .contact-phone{float:none;margin-top:30px}
    .contact-form{padding:0 10px;}
    .contact-input{float: none;margin:5px 0}
    .contact{height:760px;}
    .contact .inner{width:auto;}
    .contact-input textarea{width:90%!important;height:120px!important}
    .btn-area{margin-top:23px}
    .spot{height:233px}
    /*.spot-slider li img{margin-left:-688px}*/
    .spot-slider li img{width:1000px;margin-left:-415px;}
    .bx-controls-direction{display: none;}
    .bx-controls-direction:hover{display: block;}
    .nav{float:none;}
    .nav li{margin-left:10px}
    .nav li:first-child{margin-left:0}
    .nav li a{display:block;padding-top:2px;line-height:18px;color:#eee!important;}
    .logo{float:none;}
    .header .inner{padding-top:15px}
    #bo_cate_ul{margin-bottom:15px}
    .bo_fx{margin-bottom:5px}
    #bo_gall .gall_text_href{margin:0!important;text-align:left;}
    .aboutme-indetity li{margin-bottom:46px}
    .aboutme .inner{padding-bottom:0}
    .pg_wrap{margin-bottom:0;line-height:36px}
    .portfolio{padding:46px 0;}
    .aboutme-indetity{margin-top:46px}
    .aboutme-indetity-inner{padding-top:46px}
    
    /*.featherlight-content .featherlight-close-icon.featherlight-close{display:block;position: fixed;}*/
}
    /* animation */
/*@media screen and (min-width:1000px){
    .featherlight-content{
        animation-name: slideUp;
        -webkit-animation-name: slideUp;    

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease;    
        -webkit-animation-timing-function: ease;

        visibility: visible !important;         
    }

    @keyframes slideUp {
        0% {
            transform: translateY(100%);
        }
        100% {
            transform: translateY(0%);
        }   
    }

    @-webkit-keyframes slideUp {
        0% {
            -webkit-transform: translateY(100%);
        }
        100% {
            -webkit-transform: translateY(0%);
        }   
    }

}*/



.featherlight-iframe .featherlight-content{overflow: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;margin: 0;background:transparent}

.featherlight-iframe .featherlight-inner{width:100%;height:100%;}


/*#bo_v {background: rgba(0,0,0,.8);}*/
.featherlight-iframe {background: rgba(0,0,0,.8)!important;}
#bo_v #bo_v_link{display: none;}
#bo_v #bo_v_atc_title{display:none;position:fixed;top:50%;right:0;left:0;z-index:-1;text-align:center;}
#bo_v #bo_v_img{display: none;text-align:center;cursor:pointer; -webkit-overflow-scrolling:touch;overflow-y:auto;position:absolute;top:0;left:0;width:100%;height:100%}
#bo_v #bo_v_img img{display:block;max-width:100%;margin:30px auto;height:auto;}
#bo_v #bo_v_img img:first-child{margin-top: 0;}
.featherlight:last-of-type{background: none}

.bo_v_nb{overflow: hidden;position:relative;top:0;left:50%;}
.bo_v_nb li{float:left;}

/*.gall_li {animation:ani 3s ease forwards;}

@keyframes ani{
    0%{opacity:0;-webkit-transform:translateY(200px);
       -moz-transform:translateY(200px);
        -ms-transform:translateY(200px);
         -o-transform:translateY(200px);
            transform:translateY(200px);}
    100%{opacity:1;-webkit-transform:translateY(0);
       -moz-transform:translateY(0);
        -ms-transform:translateY(0);
         -o-transform:translateY(0);
            transform:translateY(0);}
}*/

/*************** SCROLLBAR BASE CSS ***************/
.scroll-wrapper {
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
}
.scroll-wrapper > .scroll-content {
  border: none !important;
  box-sizing: content-box !important;
  height: auto;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none !important;
  overflow: scroll !important;
  padding: 0;
  position: relative !important;
  top: 0;
  width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0;
}
.scroll-wrapper.scroll--rtl {
  direction: rtl;
}

.scroll-element {
  box-sizing: content-box;
  display: none;
}
.scroll-element div {
  box-sizing: content-box;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
  cursor: default;
}
.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible {
  display: block;
}

.scroll-textarea {
  border: 1px solid #cccccc;
  border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
  overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
  border: none !important;
  box-sizing: border-box;
  height: 100% !important;
  margin: 0;
  max-height: none !important;
  max-width: none !important;
  overflow: scroll !important;
  outline: none;
  padding: 2px;
  position: relative !important;
  top: 0;
  width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/*************** SIMPLE INNER SCROLLBAR ***************/
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-inner > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
  bottom: 2px;
  height: 8px;
  left: 0;
  width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
  height: 100%;
  right: 2px;
  top: 0;
  width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
  overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track {
  background-color: #e0e0e0;
}

.scrollbar-inner > .scroll-element .scroll-bar {
  background-color: #c2c2c2;
}

.scrollbar-inner > .scroll-element:hover .scroll-bar {
  background-color: #919191;
}

.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #919191;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -12px;
}

.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -12px;
}

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -12px;
}

.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -12px;
}

/*************** SIMPLE OUTER SCROLLBAR ***************/
.scrollbar-outer > .scroll-element,
.scrollbar-outer > .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-outer > .scroll-element {
  background-color: #ffffff;
}

.scrollbar-outer > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-outer > .scroll-element.scroll-x {
  bottom: 0;
  height: 12px;
  left: 0;
  width: 100%;
}

.scrollbar-outer > .scroll-element.scroll-y {
  height: 100%;
  right: 0;
  top: 0;
  width: 12px;
}

.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer {
  height: 8px;
  top: 2px;
}

.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer {
  left: 2px;
  width: 8px;
}

.scrollbar-outer > .scroll-element .scroll-element_outer {
  overflow: hidden;
}

.scrollbar-outer > .scroll-element .scroll-element_track {
  background-color: #eeeeee;
}

.scrollbar-outer > .scroll-element .scroll-element_outer,
.scrollbar-outer > .scroll-element .scroll-element_track,
.scrollbar-outer > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.scrollbar-outer > .scroll-element .scroll-bar {
  background-color: #d9d9d9;
}

.scrollbar-outer > .scroll-element .scroll-bar:hover {
  background-color: #c2c2c2;
}

.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #919191;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-outer > .scroll-content.scroll-scrolly_visible {
  left: -12px;
  margin-left: 12px;
}

.scrollbar-outer > .scroll-content.scroll-scrollx_visible {
  top: -12px;
  margin-top: 12px;
}

.scrollbar-outer > .scroll-element.scroll-x .scroll-bar {
  min-width: 10px;
}

.scrollbar-outer > .scroll-element.scroll-y .scroll-bar {
  min-height: 10px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -14px;
}

.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -14px;
}

.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -14px;
}

.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -14px;
}

/*************** SCROLLBAR MAC OS X ***************/
.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-macosx > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-macosx > .scroll-element .scroll-element_track {
  display: none;
}

.scrollbar-macosx > .scroll-element .scroll-bar {
  background-color: #6C6E71;
  display: block;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.scrollbar-macosx > .scroll-element.scroll-x {
  bottom: 0px;
  height: 0px;
  left: 0;
  min-width: 100%;
  overflow: visible;
  width: 100%;
}

.scrollbar-macosx > .scroll-element.scroll-y {
  height: 100%;
  min-height: 100%;
  right: 0px;
  top: 0;
  width: 0px;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar {
  height: 7px;
  min-width: 10px;
  top: -9px;
}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar {
  left: -9px;
  min-height: 10px;
  width: 7px;
}

.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer {
  left: 2px;
}

.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size {
  left: -4px;
}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer {
  top: 2px;
}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size {
  top: -4px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -11px;
}

.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -11px;
}

/*************** SCROLLBAR LIGHT ***************/
.scrollbar-light > .scroll-element,
.scrollbar-light > .scroll-element div {
  border: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-light > .scroll-element {
  background-color: #ffffff;
}

.scrollbar-light > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-light > .scroll-element .scroll-element_outer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.scrollbar-light > .scroll-element .scroll-element_size {
  background: #dbdbdb;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
  background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #dbdbdb), color-stop(100%, #e8e8e8));
  background: -webkit-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  background: -o-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  background: linear-gradient(to right, #dbdbdb 0%, #e8e8e8 100%);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.scrollbar-light > .scroll-element.scroll-x {
  bottom: 0;
  height: 17px;
  left: 0;
  min-width: 100%;
  width: 100%;
}

.scrollbar-light > .scroll-element.scroll-y {
  height: 100%;
  min-height: 100%;
  right: 0;
  top: 0;
  width: 17px;
}

.scrollbar-light > .scroll-element .scroll-bar {
  background: #fefefe;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
  background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fefefe), color-stop(100%, #f5f5f5));
  background: -webkit-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  background: -o-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  background: -ms-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  background: linear-gradient(to right, #fefefe 0%, #f5f5f5 100%);
  border: 1px solid #dbdbdb;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-light > .scroll-content.scroll-scrolly_visible {
  left: -17px;
  margin-left: 17px;
}

.scrollbar-light > .scroll-content.scroll-scrollx_visible {
  top: -17px;
  margin-top: 17px;
}

.scrollbar-light > .scroll-element.scroll-x .scroll-bar {
  height: 10px;
  min-width: 10px;
  top: 0px;
}

.scrollbar-light > .scroll-element.scroll-y .scroll-bar {
  left: 0px;
  min-height: 10px;
  width: 10px;
}

.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer {
  height: 12px;
  left: 2px;
  top: 2px;
}

.scrollbar-light > .scroll-element.scroll-x .scroll-element_size {
  left: -4px;
}

.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer {
  left: 2px;
  top: 2px;
  width: 12px;
}

.scrollbar-light > .scroll-element.scroll-y .scroll-element_size {
  top: -4px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -19px;
}

.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -19px;
}

.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -19px;
}

.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -19px;
}

/*************** SCROLLBAR RAIL ***************/
.scrollbar-rail > .scroll-element,
.scrollbar-rail > .scroll-element div {
  border: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-rail > .scroll-element {
  background-color: #ffffff;
}

.scrollbar-rail > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-rail > .scroll-element .scroll-element_size {
  background-color: #999;
  background-color: rgba(0, 0, 0, 0.3);
}

.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
  background-color: #666;
  background-color: rgba(0, 0, 0, 0.5);
}

.scrollbar-rail > .scroll-element.scroll-x {
  bottom: 0;
  height: 12px;
  left: 0;
  min-width: 100%;
  padding: 3px 0 2px;
  width: 100%;
}

.scrollbar-rail > .scroll-element.scroll-y {
  height: 100%;
  min-height: 100%;
  padding: 0 2px 0 3px;
  right: 0;
  top: 0;
  width: 12px;
}

.scrollbar-rail > .scroll-element .scroll-bar {
  background-color: #d0b9a0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* scrollbar height/width & offset from container borders */
.scrollbar-rail > .scroll-content.scroll-scrolly_visible {
  left: -17px;
  margin-left: 17px;
}

.scrollbar-rail > .scroll-content.scroll-scrollx_visible {
  margin-top: 17px;
  top: -17px;
}

.scrollbar-rail > .scroll-element.scroll-x .scroll-bar {
  height: 10px;
  min-width: 10px;
  top: 1px;
}

.scrollbar-rail > .scroll-element.scroll-y .scroll-bar {
  left: 1px;
  min-height: 10px;
  width: 10px;
}

.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer {
  height: 15px;
  left: 5px;
}

.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size {
  height: 2px;
  left: -10px;
  top: 5px;
}

.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer {
  top: 5px;
  width: 15px;
}

.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size {
  left: 5px;
  top: -10px;
  width: 2px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -25px;
}

.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -25px;
}

.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -25px;
}

.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -25px;
}

/*************** SCROLLBAR DYNAMIC ***************/
.scrollbar-dynamic > .scroll-element,
.scrollbar-dynamic > .scroll-element div {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-dynamic > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-dynamic > .scroll-element.scroll-x {
  bottom: 2px;
  height: 7px;
  left: 0;
  min-width: 100%;
  width: 100%;
}

.scrollbar-dynamic > .scroll-element.scroll-y {
  height: 100%;
  min-height: 100%;
  right: 2px;
  top: 0;
  width: 7px;
}

.scrollbar-dynamic > .scroll-element .scroll-element_outer {
  opacity: 0.3;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

.scrollbar-dynamic > .scroll-element .scroll-element_size {
  background-color: #cccccc;
  opacity: 0;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.scrollbar-dynamic > .scroll-element .scroll-bar {
  background-color: #6c6e71;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
  bottom: 0;
  height: 7px;
  min-width: 24px;
  top: auto;
}

.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
  left: auto;
  min-height: 24px;
  right: 0;
  width: 7px;
}

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
  bottom: 0;
  top: auto;
  left: 2px;
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  -o-transition: height 0.2s;
  -ms-transition: height 0.2s;
  transition: height 0.2s;
}

.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
  left: auto;
  right: 0;
  top: 2px;
  -webkit-transition: width 0.2s;
  -moz-transition: width 0.2s;
  -o-transition: width 0.2s;
  -ms-transition: width 0.2s;
  transition: width 0.2s;
}

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size {
  left: -4px;
}

.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size {
  top: -4px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -11px;
}

.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -11px;
}

/* hover & drag */
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
  overflow: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
  opacity: 1;
}

.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
  height: 100%;
  width: 100%;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
  height: 20px;
  min-height: 7px;
}

.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
  min-width: 7px;
  width: 20px;
}

/*************** SCROLLBAR GOOGLE CHROME ***************/
.scrollbar-chrome > .scroll-element,
.scrollbar-chrome > .scroll-element div {
  border: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-chrome > .scroll-element {
  background-color: #ffffff;
}

.scrollbar-chrome > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-chrome > .scroll-element .scroll-element_track {
  background: #f1f1f1;
  border: 1px solid #dbdbdb;
}

.scrollbar-chrome > .scroll-element.scroll-x {
  bottom: 0;
  height: 16px;
  left: 0;
  min-width: 100%;
  width: 100%;
}

.scrollbar-chrome > .scroll-element.scroll-y {
  height: 100%;
  min-height: 100%;
  right: 0;
  top: 0;
  width: 16px;
}

.scrollbar-chrome > .scroll-element .scroll-bar {
  background-color: #d9d9d9;
  border: 1px solid #bdbdbd;
  cursor: default;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.scrollbar-chrome > .scroll-element .scroll-bar:hover {
  background-color: #c2c2c2;
  border-color: #a9a9a9;
}

.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #919191;
  border-color: #7e7e7e;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-chrome > .scroll-content.scroll-scrolly_visible {
  left: -16px;
  margin-left: 16px;
}

.scrollbar-chrome > .scroll-content.scroll-scrollx_visible {
  top: -16px;
  margin-top: 16px;
}

.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar {
  height: 8px;
  min-width: 10px;
  top: 3px;
}

.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar {
  left: 3px;
  min-height: 10px;
  width: 8px;
}

.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer {
  border-left: 1px solid #dbdbdb;
}

.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track {
  height: 14px;
  left: -3px;
}

.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size {
  height: 14px;
  left: -4px;
}

.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer {
  border-top: 1px solid #dbdbdb;
}

.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track {
  top: -3px;
  width: 14px;
}

.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size {
  top: -4px;
  width: 14px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -19px;
}

.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -19px;
}

.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -19px;
}

.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -19px;
}

.float-contact{position:absolute;top:10px;left:0;right:0;z-index:999;overflow:hidden;width:100%;max-width:1300px;margin:0 auto;padding-right:8px;box-sizing:border-box;text-align:right;}
.float-contact.is-active{position:fixed;}
.float-contact ul{display:inline-block;}
.float-contact ul li{}
.float-contact ul li.kakao a{display:block;width:60px;height:60px;background:url(https://www.zecdesign.com/theme/freelancer/img/kakaocont.png) no-repeat 0 0 / 100%;text-indent:-999px;}
.float-contact ul li.kakao span{font-size:0;}

@media screen and (min-width: 1050px) {
  .float-contact ul li.kakao a{width:120px;height:120px;}
}
.btn_bo_user li:first-child{display:none;}