/* c3-wrap */
.c3-wrap {padding: 95px 0 85px; margin-left: 210px; height: 100vh; border-left: 1px solid rgba(255, 255, 255, .2); overflow: hidden;}
.c3-wrap .title-group {margin-bottom: 45px;}
.c3-list {margin-top: 35px; display: flex; justify-content: space-between;}
.c3-list li {position: relative; width: calc(33.33% - 26.66px); border: 1px solid #333; text-align: center; padding: 51px 0; transition: .3s; z-index: 1;}
.c3-list li::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../img/pattern.jpg"); opacity: 0; transition: .3s; z-index: -1;}
.c3-list li:hover {border-color: #fff;}
.c3-list li:hover::before {opacity: 1;}
.c3-list .icon {width: 168px; height: 168px; border-radius: 50%; background: #000; display: flex; justify-content: center; align-items: center; margin: 0 auto 25px;}
.c3-list .icon img {}
.c3-list .text-group {}
.c3-list .en-title {font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 5px; display: block;}
.c3-list .ko-title {font-size: 16px; font-weight: 400; color: #fff;}
.c3-list .desc {position: relative; font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.7); line-height: 29px;}
.c3-list .desc::before {content: ''; display: block; width: 20px; height: 2px; background: #fff; margin: 22px auto;}

/* 미디어쿼리 */
@media screen and (max-width: 1700px) {
  .c3-wrap {margin-left: 0; border-left: none;}
  .c3-wrap .inner {padding: 0 60px;}
}

@media screen and (max-width: 1300px) {
  .c3-wrap {height: auto; padding: 80px 0; border-top: 1px solid rgba(255, 255, 255, .7);}

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1023px) {
  .c3-wrap .inner {}
  .c3-list .en-title {font-size: 23px;}
  .c3-list li {width: calc(33.33% - 13.33px); padding: 30px;}
  .c3-list .icon {width: auto; height: auto; background: transparent;}
  .c3-list .desc br {display: none;}
}

@media screen and (max-width: 767px) {
  .c3-wrap {padding: 60px 0;}
  .c3-wrap .inner {padding: 0 40px;}
  .c3-list {flex-wrap: wrap;}
  .c3-list li {width: 100%; border: 1px solid #333;}
  .c3-list li + li {margin-top: 15px;}
  .c3-list .en-title {font-size: 21px;}
  .c3-list .ko-title, .c3-list .desc {font-size: 15px;}
}

@media screen and (max-width: 480px) {
  .c3-wrap {padding: 50px 0;}
  .c3-wrap .inner {padding: 0 20px;}
  .c3-wrap .title-group {margin-bottom: 35px;}
  .c3-list .en-title {font-size: 20px;}
  .c3-list .icon {margin-bottom: 20px;}
  .c3-list .ko-title, .c3-list .desc {font-size: 14px;}
  .c3-list .desc::before {margin: 15px auto;}
}