/* c1-wrap */
.c1-wrap {position: relative; padding: 95px 0 150px; text-align: center; margin-left: 210px; height: 100vh; border-left: 1px solid rgba(255, 255, 255, .2); overflow: hidden;}
.c1-wrap .bg {position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: rgba(255, 255, 255, .1);}
.c1-wrap .inner {max-width: 1500px;}
.c1-wrap .content-group {display: flex;}
.c1-wrap .content-group > div {width: 50%;}
.c1-wrap .left {}
.c1-wrap .icon {position: relative; width: 62px; height: 62px; margin: 40px auto 60px;}
.c1-wrap .icon img {position: absolute; left: 0; top: 0; transition: .5s;}
.c1-wrap .icon img:nth-child(1) {opacity: 1;}
.c1-wrap .icon img:nth-child(2) {opacity: 0;}
.c1-wrap li:hover .icon img:nth-child(1) {opacity: 0;}
.c1-wrap li:hover .icon img:nth-child(2) {opacity: 1;}
.c1-wrap .content-group {margin-top: 90px}
.c1-wrap .content {}
.c1-list {display: flex; margin-top: 75px;}
.c1-list li {flex-basis: 33.33%;}
.c1-list li + li {border-left: 1px solid #333;}
.c1-list em {position: relative; font-size: 14px; font-weight: 500; color: #fff;}
.c1-list em::before {content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 4px; height: 4px; background: #fff; border-radius: 50%; transition: .3s;}
.c1-list li:hover em::before {background: #cf001b;}
.c1-list .icon {}
.c1-list .icon img {}
.c1-list .name {display: block;margin-bottom: 15px;font-size: 16px;font-weight: 500;color: #fff;min-height: 24px;}
.c1-wrap .left .name {margin-bottom: 0;}
.c1-list .desc {position: relative; font-size: 15px; font-weight: 300; line-height: 1.8em; color: #bbb;}
.c1-wrap .left .c1-list .desc::before {content: ''; display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto 15px;}

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

@media screen and (max-width: 1300px) {
  .c1-wrap {height: auto; padding: 80px 0 0;}
  .c1-wrap .inner {padding: 0;}
  .c1-wrap .bg {display: none;}
  .c1-wrap .title-group, .c1-wrap .content {padding: 0 60px;}
  .c1-wrap .content-group {display: block; margin-top: 50px;}
  .c1-wrap .content-group > div {width: 100%;}
  .c1-wrap .content-group > div + div {padding: 80px 0; margin: 80px 0 0;}
  .c1-wrap .right {background: rgba(255, 255, 255, .1);}
}

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

}

@media screen and (max-width: 1023px) {
  .c1-wrap .inner {}
}

@media screen and (max-width: 767px) {
  .c1-wrap {padding: 60px 0 0;}
  .c1-wrap .title-group, .c1-wrap .content {padding: 0 40px;}
  .c1-list li {padding: 0 15px;}
  .c1-wrap .content-group > div + div {padding: 60px 0; margin: 60px 0 0;}
  .c1-list .desc {font-size: 14px;}
  .c1-list .desc br {display: none;}
}

@media screen and (max-width: 480px) {
  .c1-wrap {padding: 50px 0 0;}
  .c1-wrap .title-group, .c1-wrap .content {padding: 0 20px;}
  .c1-wrap .content-group {margin-top: 35px;}
  .c1-wrap .content-group > div + div {padding: 50px 0; margin: 50px 0 0;}
  .c1-list {flex-wrap: wrap; margin-top: 35px;}
  .c1-list li {flex-basis: 100%; padding: 30px 0; border: 1px solid #333;}
  .c1-list li + li {margin-top: 15px;}
  .c1-wrap .icon {margin: 20px auto; width: 46px; height: 45px;}
  .c1-list .desc {font-size: 13px;}
}