@charset "UTF-8";

img.mo {display:none;}
button {font-family: 'Noto Sans KR';}
.link_detail {display: inline-block; padding: 12px 22px; background-color: #F6F6F6; border-radius: 40px; font-size: 16px; color: #666; letter-spacing: -1.4px; font-weight: 500; transition: all 0.5s;}
.link_detail .bt_arrow {position: relative; display: inline-block;margin-left: 4px; width: 17px; height: 16px; background: url(../images/icon_landing/ic_arrow.svg) -40px 0; top: 1px;}
.btn_fill_mid_gray {display: flex; font-size:18px; padding: 20px 60px 20px 56px; letter-spacing:0; justify-content: center; align-items: center; border-radius: 30px; color:#555; transition:all .2s; font-weight:500; background: #f6f6f6}
.btn_fill_mid_gray:hover {background: #e9e9e9; color: #333; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);}

/* 서브 메인 비주얼 */
.content_head .tit {padding-top: 100px; width: 100%; text-align: center;}
.content_head h1 {color:#000; font-size:48px; text-align: center;}
.content_head h2,
.content_body h2 {text-align:center; font-size:42px; font-weight:600; color:#000; line-height:140%;}
.content_head h3,
.content_body h3 {text-align:center; font-size:38px; color:#000; line-height:140%;}
.content_head .desc {margin-top:20px; font-size:18px; color:#888; text-align: center;}

.case2 .items_video {margin: 0 auto; width: 80%;} 
.case2 .ic_com.arrow_pre {display: block; width: 44px; height: 80px; background-position:-300px -200px}
.case2 .ic_com.arrow_next {display: block; width: 44px; height: 80px; background-position:-400px -200px}
.case2 .area_cont {padding-top:110px;}
.case2 .area_video {padding: 40px 0 10px}
.case2 .area_video .inner {max-width:1100px}
.case2 .area_video .item {width:890px; cursor: pointer; border-radius: 8px; overflow: hidden;}
.case2 .area_video button.ic_com {position: absolute; top:40%;}
.case2 .area_video .arrow_pre {left:0;}
.case2 .area_video .arrow_next {right: 0}
.case2 .area_case .items {margin-top: 60px; display: flex; flex-wrap: wrap;  gap: 100px 58px;}
.case2 .area_case .item_case {width: calc(33.33% - 20px); max-width:388px; box-sizing:border-box; border-radius:30px; background: #FFF; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05), 0px 3px 6px 0px rgba(0, 0, 0, 0.04); transition:all .4s}
.case2 .area_case .item_case img {display:block}
.case2 .area_case .item_case .thumb {border-radius:30px 30px 0 0; overflow:hidden;}
.case2 .area_case .item_case .thumb img {width: 100%; transition: transform 0.3s ease;}

.case2 .area_case .item_case .cont {position:relative; padding: 20px 40px 54px}
.case2 .area_case .item_case .logo {width:200px; height: 50px}
.case2 .area_case .item_case .logo img {height: 50px}
.case2 .area_case .item_case .company {margin-top:16px; font-size:22px; font-weight: bold;}
.case2 .area_case .item_case .company .new {position: relative;}
.case2 .area_case .item_case .company .new:after {content:'New'; margin-left:5px;font-size:14px; color: #FF7455; vertical-align: super}
.case2 .area_case .item_case .desc {display: -webkit-box; margin-top:8px; font-size:18px; color: #888; -webkit-line-clamp: 2; /* 두 줄까지 표시 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.case2 .area_case .item_case .tag {margin-top:20px; font-size:14px; color: #888}
.case2 .area_case .item_case .more {display:inline-block; position:absolute; right:40px; bottom: 50px; width:32px; height: 24px; background:url(../images/case2/ic_arrowr_min24.svg) no-repeat }
.case2 .area_case a.item_case:hover {cursor: pointer; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.12), 0px 3px 6px 0px rgba(0, 0, 0, 0.04);}
.case2 .area_case a.item_case:hover .thumb img {transform: scale(1.1);}

.case2 .area_case .items + .btn_wrap2 {margin-top:100px}
.case2 .company-list {padding-top:40px; gap:24px}

/* 고객사 */
.company-list {display: flex; flex-direction: column; justify-content: center; align-items: center; padding:80px 0 100px;}
.company-list .title {text-align: center; font-weight: 600; font-size: 48px; line-height: 150%; color: #333; margin-bottom: 30px;}
.company-list .link {margin-bottom: 100px;}
.company-list .container_wrap {display: flex; flex-direction: column; gap: 10px; width: 100%;}
.company-list .container_wrap .marquee_container {overflow: hidden; width: 100%; position: relative; height: 104px;}
.company-list .container_wrap .marquee_container .marquee_inner {width: 200%; display: flex; position: absolute; top: 0; animation: 50s linear infinite; gap: 40px;}
.company-list .container_wrap.mobile .marquee_container .marquee_inner {animation: 20s linear infinite; gap: 57px;}
.company-list .container_wrap.mobile {display:none;}
.company-list .container_wrap .marquee_container.no1 .marquee_inner {animation-name: marqueeToLeft; left: 0;}
.company-list .container_wrap .marquee_container.no2 .marquee_inner {animation-name: marqueeToRight; right: 0;}
.company-list .container_wrap .marquee_container.no3 .marquee_inner {animation-name: marqueeToLeft; left: 0;}
.company-list .container_wrap .marquee_container.no4 .marquee_inner {animation-name: marqueeToRight; right: 0;}
.company-list .container_wrap .marquee_container .marquee_inner .wrap {display: flex; gap: 57px;}

@keyframes marqueeToLeft {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

@keyframes marqueeToRight {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}


/* text type */
.tabs {display: flex; flex-wrap: wrap; gap: 4px 0}
.tabs .tab {padding: 8px 20px; cursor: pointer; border: none; background-color: transparent; outline: none; font-size: 20px; font-weight: bold; color: #C1C1C2;transition:all .2s}
.tabs .tab.active {display: flex; justify-content: center; align-items: center; border-radius: 50px; background: #36393A; color: #fff}


/*** Responsive layout ***/
@media all and (max-width:959px){	
  .content_head .tit, .tit.main {padding-top:80px;}
  .content_head h1, .content_head h1 {font-size:32px;}

  .tabs{flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; padding-bottom:8px}
  .tabs .tab {padding:4px 12px; font-size:16px;}

  /* 멀티클래스 */
  br.m {display:block;}
  br.p {display:none;}
  em.m {display:none;}
  img.pc {display:none;}
  img.mo {display:block;}
  .link {font-size:15px; margin-top:18px; text-align:center; flex-direction:row; justify-content:center;}
  
  /* 고객사 */
  .company-list {padding:40px 0 100px;}
  .company-list .title {font-size:28px; line-height:33px; margin-bottom:18px;}
  .company-list .link {font-size:15px; margin-bottom:48px;}
  .company-list .container_wrap.pc {display:none;}
  .company-list .container_wrap.mobile {display:flex;}
  .company-list .container_wrap .marquee_container {height:45px;}
  .company-list .container_wrap .marquee_container .marquee_inner {gap:24px;}
  .company-list .container_wrap .marquee_container .marquee_inner .wrap {gap:24px;}
  .company-list.pdb {padding:40px 0 30px;}

  /*고객사례*/
  .case2 .area_video .item a {display:flex; justify-content: center;}
  .case2 .area_case .items {gap:20px; flex-direction: column; align-items: center;}
  .case2 .area_case .item {width:100%;}
  .case2 .area_case .item .cont {padding: 20px 40px 40px}
  .case2 .area_case .item .logo {display: none;}
  .case2 .area_case .item .desc {font-size: 16px;}
  .case2 .area_case .item .company {margin-top:0}
  .case2 .area_case .item .more {bottom: 36px}
  .case2 .area_case .item_case {width: 100%;}
  .case_story .area_visual {padding: 0 4%}

  .case2 .area_cont.last h2 {font-size:28px;}
  .case2 .area_cont {padding-top:0;}

 }

@media all and (max-width:320px){
  .btn_major, .btn_minor, .btn_general, .btn_ghost {min-width: inherit; width: 100%; padding: 0;}
}