@charset "utf-8";

#dBody h2 img {height:126px;}

.m-block {display:block;}
.m-none {display:none;}

/* title */
.h3-title01 {margin-bottom:8px; color:#6e0063; font-size:5.625vw; line-height:6.875vw;}

/* text-type */
.text-type01 {color:#848484; font-size:3.75vw; line-height:5.625vw;}
.text-type01 br {display:none;}

/* list-type */
.list-type01 {padding:5px 30px 0 30px;}
.list-type01 li {display:table; width:100%; height:86px; margin-top:10px; border:1px solid #e1e1e1; background-color:#fff; background-repeat:no-repeat; background-position:12px center; background-size:55px 55px; box-sizing:border-box; box-shadow:0 3px 8px 1px rgba(0,0,0,0.05);}
.list-type01 li > div {display:table-cell; padding:0 0 0 77px; vertical-align:middle;}
.list-type01 li .tit {padding:0 20px 0 0; color:#592c5f; font-family:'Raleway'; font-size:5vw; font-weight:700; line-height:5.625vw;}
.list-type01 li .txt {margin-top:5px; padding:0 5px 0 0; color:#494949; font-size:3.4375vw; line-height:4.6875vw;}

/* form type */
.in-check {position:relative; display:inline-block;}
.in-check input[type=checkbox] {position:absolute; opacity:0;}
.in-check label {display:inline-block; padding:0 0 0 20px; color:#333; font-size:12px; line-height:15px; background:url("../images/form_check_m_off.png") no-repeat 0 center; background-size:15px 15px;}
.in-check input[type=checkbox]:checked + label {background-image:url("../images/form_check_m_on.png");}

/* btn style */
.btn-style01 {display:inline-block; width:75px; height:30px; line-height:30px; color:#fff; font-family:'Raleway'; font-weight:700; background:#6d0062; text-align:center;}

/* board-write */
.board-write {padding:6px 0 0 0;}
.board-write .tb-row {margin-top:6px;}
.board-write .tb-cell {position:relative; height:30px; padding:0 0 0 55px; background:#eee;}
.board-write .tb-cell .label {position:absolute; top:0; left:10px; line-height:30px;}
.board-write .tb-cell .label label {color:#333; font-size:11px;}
.board-write .tb-cell input[type=text] {width:100%; height:30px; line-height:30px; padding:0 5px; color:#333; font-size:12px; border:none; background:#eee; box-sizing:border-box;}
.board-write .tb-cell.textarea {height:auto; padding:30px 0 0 8px;}
.board-write .tb-cell.textarea textarea {width:100%; height:30px; height:170px; padding:0 5px; color:#333; font-size:12px; border:none; background:#eee; box-sizing:border-box;}
.board-write .tb-cell .file-area {position:relative; height:30px; overflow:hidden;}
.board-write .tb-cell .file-area input[type=file] {position:absolute; top:0; left:0; width:100%; box-sizing:border-box; opacity:0; cursor:pointer;}
.board-write .tb-cell .file-area input[type=text] {float:left; width:80%;}
.board-write .tb-cell .file-area .btn {float:left; width:18%; height:30px; line-height:30px; margin-left:2%; color:#fff; font-weight:700; background-color:#969696; text-align:center;}
.board-write .tb-check-btn {margin-top:22px; text-align:center;}
.board-write .tb-check {}
.board-write .tb-btn {margin-top:15px;}

/* text-visual */
.text-visual {}
.text-visual .text-type01 {padding:10px 15% 0 15%; text-align:center;}
.text-visual img {width:100%;}
.text-visual .scroll-down {display:none;}

/* brand */
.brand {}
.brand .text-type01 {margin:25px 20px 0 30px;}
.brand .list-type01 li:nth-child(1) {background-image:url("../images/brand_ico01_off.png");}
.brand .list-type01 li:nth-child(2) {background-image:url("../images/brand_ico02_off.png");}
.brand .list-type01 li:nth-child(3) {background-image:url("../images/brand_ico03_off.png");}
.brand .list-type01 li:nth-child(4) {background-image:url("../images/brand_ico04_off.png");}
.brand .list-type01 li:nth-child(5) {background-image:url("../images/brand_ico05_off.png");}

/* business */
.business {}
.business .text-type01 {margin:25px 20px 0 30px;}
.business .list-type01 li {height:122px;}
.business .list-type01 li .tit {padding-right:0;}
.business .list-type01 li .txt br {display:none;}
.business .list-type01 li:nth-child(1) {background-image:url("../images/business_ico01_off.png");}
.business .list-type01 li:nth-child(2) {background-image:url("../images/business_ico02_off.png");}
.business .list-type01 li:nth-child(3) {background-image:url("../images/business_ico03_off.png");}
.business .list-type01 li:nth-child(4) {background-image:url("../images/business_ico04_off.png");}
.business .list-type01 li:nth-child(5) {background-image:url("../images/business_ico05_off.png");}

/* portfolio */
.portfolio > div {padding:15px 0 0 0; text-align:center;}
.portfolio .cate {padding:4px 22px 0 22px;}
.portfolio .cate li {display:inline-block; margin:8px 1px 0 1px; font-size:0; line-height:0;}
.portfolio .cate li a {display:block; height:21px; line-height:21px; padding:0 12px; color:#fff; font-size:11px; background:#b7b7b7; border-radius:3px; transition:0.3s all ease-in-out;}
.portfolio .cate li a.active {background-color:#592c5f;}
.portfolio .portfolio-list {padding:0 30px 0 30px;}
.portfolio .portfolio-list li {margin-top:20px; text-align:left;}
.portfolio .portfolio-list li a {display:block;}
.portfolio .portfolio-list li img {width:100%;}
.portfolio .portfolio-list li .tit {margin:8px 0 3px 0; color:#592c5f; font-size:4.375vw; font-weight:700; line-height:5vw;}
.portfolio .portfolio-list li .txt {color:#494949; font-size:3.75vw; line-height:5.625vw;}
.portfolio .btn-more {margin-top:22px;}
.portfolio .btn-more a {display:inline-block; width:46px; height:16px; line-height:16px; color:#fff; font-family:'Raleway'; font-size:11px; font-weight:700; background:#592b5f; text-align:center;}

.port-layer {display:none; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.96); z-index:999;}
.port-layer.active {display:block;}
.port-layer > div {position:relative;}
.port-layer .title-box {position:relative; padding:45px 30px 0 30px; text-align:left;}
.port-layer .title-box .tit {padding-bottom:8px; color:#fff; font-size:4.6875vw; font-weight:700; line-height:5.625vw; border-bottom:1px solid #fff;}
.port-layer .title-box .info {padding:8px 0 10px 0;}
.port-layer .title-box .info:after {content:''; display:block; clear:both;}
.port-layer .title-box .info p {float:left; width:50%; color:#fff; font-family:'Raleway'; font-size:10px; font-weight:700; line-height:14px;}
.port-layer .title-box .info p span {padding-right:3px; color:#717171; font-weight:400;}
.port-layer .title-box .info p:nth-child(2) {text-align:right;}
.port-layer .title-box .info p.date {position:absolute; top:28px; left:30px;}
.port-layer .image-list {}
.port-layer .image-list img {width:100%;}
.port-layer .image-list .big > div {display:none;}
.port-layer .image-list .big > div.active {display:block;}
.port-layer .image-list .thum {margin:14px 0 0 -2%; overflow:hidden;}
.port-layer .image-list .thum li {float:left; width:25%; padding-left:2%; box-sizing:border-box;}
.port-layer .image-list .thum li a {display:block; opacity:0.3; transition:0.3s all ease-in-out;}
.port-layer .image-list .thum li a.active {opacity:1;}
.port-layer .text {padding:20px 30px 0 30px; color:#fff; font-size:3.75vw; line-height:5.625vw;}
.port-layer .btn-close {position:absolute; top:13px; right:13px; display:block; width:16px; height:16px; background:url("../images/layer_m_close.png") no-repeat 0 0; background-size:16px 16px;}

/* clients */
.clients {}
.clients .text-type01 {margin:10px 30px 0 42px;}
.clients .list {padding:5px 35px 0 35px; overflow:hidden;}
.clients .list li {float:left; width:50%; padding:10px 7px 0 7px; text-align:center; box-sizing:border-box;}
.clients .list li img {width:100%; max-width:218px;}

/* contactus */
.contactus {}
.contactus > div {padding:40px 30px 0;}
.contactus > div .text-type01 br {display:block;}
.contactus .location-list li {position:relative; padding:0 0 3px 13.75vw; color:#494949; font-size:3.75vw; line-height:5.625vw;}
.contactus .location-list li .tit {position:absolute; top:0; left:0; display:block; width:11.875vw; height:4.6875vw; line-height:4.6875vw; color:#fff; font-size:2.8125vw; background:#6d0062; text-align:center;}
.contactus .map {margin:0px 0px 0 0px; height:270px; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#f2f2f2;}
.contactus .map > div {width:100%;}

/* recruit */
.recruit {}
.recruit > div {padding:30px 30px 0 30px;}
.recruit .text-type01.text01 {position:relative; padding-left:18px;}
.recruit .text-type01.text01:before {content:'※'; display:block; position:absolute; top:0; left:0;}
.recruit .text-type01.text02 {margin-top:23px; text-align:center;}
.recruit .text-type01.text02 br {display:none;}

/* PC _ 1200~ */
@media all and (min-width:1200px) {

  #dBody h2 img {height:262px;}

  .m-block,
  .m-none {display:inline;}

  /* title */
  .h3-title01 {margin-bottom:23px; color:#6e0063; font-size:43px; line-height:48px;}

  /* text-type */
  .text-type01 {font-size:16px; line-height:26px;}
  .text-type01 br {display:block;}

  /* list-type */
  .list-type01 {padding:5px 30px 0 4px; overflow:hidden;}
  .list-type01 li {float:left; width:520px; height:115px; margin:38px 0 0 38px; background-position:24px center; background-size:75px 75px; box-shadow:0 3px 8px 1px rgba(0,0,0,0.05); transition:.3s all ease-in-out;}
  .list-type01 li > div {padding:0 0 0 120px;}
  .list-type01 li .tit {padding:0 20px 0 0; font-size:24px; line-height:28px; transition:.3s all ease-in-out;}
  .list-type01 li .txt {margin-top:8px; padding:0 0 0 0; font-size:14px; line-height:23px; transition:.3s all ease-in-out;}
  /*
  .list-type01 li:hover {background-color:#7a557f;}
  .list-type01 li:hover .tit,
  .list-type01 li:hover .txt {color:#fff;}
  */

  /* form type */
  .in-check label {padding:0 0 0 36px; font-size:14px; line-height:27px; background-image:url("../images/form_check_off.png"); background-size:27px 27px;}
  .in-check input[type=checkbox]:checked + label {background-image:url("../images/form_check_on.png");}

  /* btn style */
  .btn-style01 {width:100%; height:35px; line-height:35px; font-size:16px;}

  /* board-write */
  .board-write {padding:45px 0 0 0; overflow:hidden;}
  .board-write .tb-row {float:left; margin-top:7px; width:100%; box-sizing:border-box;}
  .board-write .tb-cell {position:relative; height:43px; padding:0 0 0 60px; background:none;}
  .board-write .tb-cell .label {left:0; line-height:40px;}
  .board-write .tb-cell .label label {color:#333; font-size:14px;}
  .board-write .tb-cell input[type=text] {height:40px; line-height:40px; font-size:14px;}
  .board-write .tb-cell.textarea {height:auto; padding:0 0 0 60px;}
  .board-write .tb-cell.textarea textarea {height:230px; font-size:14px;}
  .board-write .tb-cell .file-area {height:40px;}
  .board-write .tb-cell .file-area input[type=file] {height:40px;}
  .board-write .tb-cell .file-area input[type=text] {width:86%;}
  .board-write .tb-cell .file-area .btn {width:14%; height:40px; line-height:40px; margin-left:0; font-size:14px; font-weight:400;}
  .board-write .tb-row.tb-sec2 {width:50%;}
  .board-write .tb-row.tb-sec2:nth-child(2n+1) {padding-right:15px;}
  .board-write .tb-row.pd1 {padding-right:50%;}
  .board-write .tb-check-btn {float:left; width:100%; margin-top:14px; padding-left:60px; overflow:hidden; text-align:left; box-sizing:border-box;}
  .board-write .tb-check {float:left; width:86%; padding-top:5px;}
  .board-write .tb-btn {float:left; width:14%; margin-top:0;}

  /* text-visual */
  #dBody > .text-visual {width:85%; margin-top:-80px;}
  #dBody > .text-visual:before {display:none;}
  #dBody > .text-visual .video {}
  .text-visual .text-type01 {padding:10px 0 0 0; color:#666; font-size:24px; line-height:30px; text-align:center;}
  .text-visual .scroll-down {
		display:block;
		position:absolute; bottom:160px; right:-50px;
    width:100px;
    height:100px;
    background:url("../images/icon_scrolldown.png") no-repeat 0 0;
    background-size:cover;
    opacity:0.7;
    animation:scrollMotion 1.5s infinite;
    animation-timing-function:cubic-bezier;
	}
  @keyframes scrollMotion {
    from{bottom:160px;}
  	50%{bottom:140px;}
  	to{bottom:160px;}
  }
  @-webkit-keyframes scrollMotion {
    from{bottom:160px;}
  	50%{bottom:140px;}
  	to{bottom:160px;}
  }

  /* brand */
  .brand .text-type01 {margin:25px 0 0 40px;}
  /*
  .brand .list-type01 li:nth-child(1):hover {background-image:url("../images/brand_ico01_on.png");}
  .brand .list-type01 li:nth-child(2):hover {background-image:url("../images/brand_ico02_on.png");}
  .brand .list-type01 li:nth-child(3):hover {background-image:url("../images/brand_ico03_on.png");}
  .brand .list-type01 li:nth-child(4):hover {background-image:url("../images/brand_ico04_on.png");}
  .brand .list-type01 li:nth-child(5):hover {background-image:url("../images/brand_ico05_on.png");}
  */

  /* business */
  .business .text-type01 {margin:25px 0 0 40px;}
  .business .list-type01 li {height:145px;}
  .business .list-type01 li .txt br {display:block;}
  /*
  .business .list-type01 li:nth-child(1):hover {background-image:url("../images/business_ico01_on.png");}
  .business .list-type01 li:nth-child(2):hover {background-image:url("../images/business_ico02_on.png");}
  .business .list-type01 li:nth-child(3):hover {background-image:url("../images/business_ico03_on.png");}
  .business .list-type01 li:nth-child(4):hover {background-image:url("../images/business_ico04_on.png");}
  .business .list-type01 li:nth-child(5):hover {background-image:url("../images/business_ico05_on.png");}
  */

  /* portfolio */
  .portfolio > div {padding:80px 0 0 0;}
  .portfolio .text-type01 {padding-left:50px; text-align:left;}
  .portfolio .cate {padding:20px 0 0 47px; text-align:left;}
  .portfolio .cate li {margin:3px 3px 0 3px;}
  .portfolio .cate li a {height:30px; line-height:30px; padding:0 22px; font-size:15px; border-radius:5px;}
  .portfolio .portfolio-list {position:relative; margin-top:45px; padding:0 50px 0 50px;}
  .portfolio .portfolio-list > div {overflow:hidden;}
  .portfolio .portfolio-list ul {position:relative; overflow:hidden;}
  .portfolio .portfolio-list li {float:left; width:353px; margin:0 0 0 20px;}
  .portfolio .portfolio-list li:first-child {margin-left:0;}
  .portfolio .portfolio-list li img {width:353px; height:225px;}
  .portfolio .portfolio-list li .tit {margin:15px 0 12px 0; font-size:20px; line-height:24px;}
  .portfolio .portfolio-list li .txt {font-size:14px; line-height:23px;}
  .portfolio .portfolio-list > a {position:absolute; top:70px; display:block; width:35px; height:96px; background-position:0 0; background-repeat:no-repeat;}
  .portfolio .portfolio-list .arrow-lef {left:0; background-image:url("../images/arrow_lef.png")}
  .portfolio .portfolio-list .arrow-rig {right:0; background-image:url("../images/arrow_rig.png")}
  .portfolio .btn-more {display:none;}

  .port-layer > div {width:1060px; margin:0 auto;}
  .port-layer .title-box {padding:120px 0 0 0;}
  .port-layer .title-box .tit {padding-bottom:15px; font-size:26px; line-height:30px;}
  .port-layer .title-box .info {padding:10px 0 9px 0;}
  .port-layer .title-box .info:after {display:none;}
  .port-layer .title-box .info p {float:none; display:inline-block; width:auto; margin-left:35px; font-size:14px; line-height:18px;}
  .port-layer .title-box .info p span {padding-right:5px;}
  .port-layer .title-box .info p:first-child {margin-left:0;}
  .port-layer .title-box .info p:nth-child(2) {text-align:left;}
  .port-layer .title-box .info p.date {position:static;}
  .port-layer .image-list {overflow:hidden;}
  .port-layer .image-list .big {float:left; width:850px;}
  .port-layer .image-list .big img {height:520px;}
  .port-layer .image-list .thum {float:right; width:204px; margin:0;}
  .port-layer .image-list .thum li {float:none; width:100%; margin-top:7px; padding-left:0; font-size:0; line-height:0;}
  .port-layer .image-list .thum li:first-child {margin-top:0;}
  .port-layer .image-list .thum li a img {height:125px;}
  .port-layer .text {padding:20px 0 0 0; font-size:14px; line-height:23px;}
  .port-layer .btn-close {position:fixed; top:60px; right:120px; width:73px; height:73px; background-image:url("../images/layer_close.png"); background-size:73px 73px;}

  /* clients */
  .clients .text-type01 {margin:10px 30px 0 42px;}
  .clients .list {padding:15px 0 0 26px;}
  .clients .list li {width:229px; padding:25px 13px 0 12px;}
  .clients .list li img {width:204px; max-width:204px;}

  /* contactus */
  .contactus {}
  .contactus:after {content:''; display:block; clear:both;}
  .contactus > div {float:left; width:540px; padding:40px 7px 0 40px; box-sizing:border-box;}
  .contactus .location-list li {padding:0 0 6px 117px; font-size:16px; line-height:25px;}
  .contactus .location-list li .tit {top:4px; width:98px; height:19px; line-height:19px; font-size:14px;}
  .contactus .map {margin:0px 0 0 0; height:450px; border:1px solid #eee;}

  /* recruit */
  .recruit {}
  .recruit > div {position:relative; padding:75px 40px 0 40px;}
  .recruit .text-type01.text01 {position:absolute; top:284px; left:615px; color:#494949; font-size:14px; font-weight:300;}
  .recruit .text-type01.text01:before {top:0;}
  .recruit .text-type01.text02 {position:absolute; top:230px; left:615px; margin-top:0; padding-left:18px; text-indent:-18px; color:#494949; font-size:14px; font-weight:300; text-align:left;}
  .recruit .text-type01.text02 br {display:block;}
  .recruit .board-write .tb-cell .file-area input[type=text],
  .recruit .board-write .tb-check {width:987px;}
  .recruit .board-write .tb-cell .file-area .btn,
  .recruit .board-write .tb-btn {width:73px;}

}

.ellipsis-multi {
  width:300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 라인수 */
  -webkit-box-orient: vertical;
  word-wrap:break-word;
  line-height: 1.2em;
  height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}