/* common */
.ci .title-area {text-align: center;}
.ci .title-area .title {font-size: 50px; font-weight: 700; color: #000; margin-bottom: 25px;}
.ci .title-area .title::before {content: ''; display: block; width: 50px; height: 3px; background: #e50050; margin: 0 auto 10px;}
.ci .title-area .desc {font-size: 16px; font-weight: 300; line-height: 1.88; color: #4c4c4c;}

/* ci */
.ci {position: relative; overflow: hidden; z-index: 1;}
.ci .inner {padding: 80px 0 95px;}

/* group-design */
.ci .group-design .title-area {background: #fff;}
.ci .title-area .inner {padding-bottom: 45px;}
.ci .group-design .design-view {background: #f7f7f7;}
.ci .group-design .design-view .inner {display: flex; justify-content: space-between; align-items: center;}
.ci .design-view .design-logo {width: 50%;}
.ci .design-view .design-info {width: 45%;}
.ci .group-design .design-logo img {border: 1px solid #ddd;}
.ci .design-info .title {display: block; margin-bottom: 45px; font-size: 25px; font-weight: 700; color: #4c4c4c;}
.ci .design-info .title::before {content: ''; display: block; width: 15px; height: 2px; background: #595757; margin-bottom: 10px;}
.ci .design-info .desc {font-size: 17px; font-weight: 300; line-height: 1.71; color: #4c4c4c;}
.ci .design-info .desc + .desc {margin-top: 20px;}

/* group-color */
.ci .group-color .color-view {display: flex; justify-content: space-between; margin-top: 55px;}
.ci .group-color .color-area {width: calc((100% - 70px) / 3); border-radius: 20px; padding: 40px 45px; color: #fff;}
.ci .group-color .color-area:nth-child(1) {background: #595757;}
.ci .group-color .color-area:nth-child(2) {background: #009c95;}
.ci .group-color .color-area:nth-child(3) {background: #e5004f;}
.ci .color-view .title {font-size: 24px; font-weight: 700; display: block; margin-bottom: 16px;}
.ci .color-view .desc {font-size: 17px; font-weight: 300; line-height: 1.71; min-height: 87px;}
.ci .color-view .color-code {font-size: 17px; font-weight: 700; display: block; margin-top: 25px;}

/* group-signature */
.ci .group-signature {background: #f7f7f7;}
.ci .group-signature .signature-view {margin-top: 40px;}
.ci .group-signature .signature-area {border-top: 1px solid #ddd; padding: 60px 0; text-align: center;}
.ci .group-signature .signature-area:last-child {padding-bottom: 0;}
.ci .signature-area .title {font-size: 25px; font-weight: 700; color: #4c4c4c; display: block; margin-bottom: 30px;}
.ci .group-signature .logo-box-wrap {display: flex; justify-content: space-between;}
.ci .group-signature .logo-box {width: calc((100% - 30px) / 2);}
.ci .group-signature .logo-box .logo {border: 1px solid #ddd;}
.ci .group-signature .logo-box .type {display: block; margin-top: 20px; font-size: 17px; font-weight: 300; color: #4c4c4c;}
.ci .group-signature .logo-box .type::before {content: '·'; margin-right: 5px;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .ci .inner {padding: 80px 20px 95px;}
}

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

}

@media screen and (max-width: 1400px) {
    /* common */
    .ci .inner {padding: 80px 60px 95px;}
}

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

}

@media screen and (max-width: 1200px) {
    /* group-color */
    .ci .color-view .desc, .ci .color-view .color-code {font-size: 16px;}
    .ci .color-view .desc {min-height: 136px;}
}

@media screen and (max-width: 1023px) {
    /* common */
    .ci br {display: none;}
    .ci .title-area .title {font-size: 40px;}

    /* group-design */
    .ci .group-design .design-view .inner {flex-direction: column;}
    .ci .design-view .design-logo, .ci .design-view .design-info {width: auto; text-align: center;}
    .ci .design-view .design-info {margin-top: 50px;}
    .ci .design-info .title {margin-bottom: 20px;}
    .ci .design-info .title::before {margin-left: auto; margin-right: auto;}
    .ci .design-info .desc + .desc {margin-top: 10px;}

    /* group-color */
    .ci .group-color .color-area {width: calc((100% - 40px) / 3); padding: 35px 25px;}
    .ci .color-view .title {font-size: 22px;}
    .ci .color-view .desc {word-break: break-all;}
}

@media screen and (max-width: 767px) {
    /* common */
    .ci .inner {padding: 60px 40px;}
    .ci .title-area .title {font-size: 35px; margin-bottom: 20px;}
    .ci .title-area .desc {font-size: 15px;}

    /* group-design */
    .ci .design-info .title {font-size: 23px;}
    .ci .design-info .desc {font-size: 16px;}

    /* group-color */
    .ci .group-color .color-view {flex-wrap: wrap;}
    .ci .group-color .color-area {width: 100%; text-align: center; padding: 30px 20px;}
    .ci .group-color .color-area + .color-area {margin-top: 15px;}
    .ci .color-view .desc {min-height: 0; word-break: keep-all;}

    /* group-signature */
    .ci .group-signature .signature-area {padding: 35px 0;}
    .ci .signature-area .title {font-size: 23px;}
    .ci .group-signature .logo-box {width: calc((100% - 15px) / 2);}
    .ci .group-signature .logo-box .type {font-size: 16px;}
}

@media screen and (max-width: 640px) {
    .ci .group-signature .logo-box-wrap {flex-direction: column;}
    .ci .group-signature .logo-box {width: 100%;}
    .ci .group-signature .logo-box  + .logo-box {margin-top: 30px;}
    .ci .group-signature .logo-box .type {margin-top: 12px;}
}

@media screen and (max-width: 480px) {
    /* common */
    .ci .inner {padding: 60px 20px;}
    .ci .title-area .title {font-size: 30px; margin-bottom: 15px;}
    .ci .title-area .desc {font-size: 14px;}

    /* group-design */
    .ci .design-info .title {font-size: 20px;}
    .ci .design-info .desc {font-size: 15px;}

    /* group-color */
    .ci .group-color .color-view {margin-top: 40px;}
    .ci .color-view .title {font-size: 19px;}
    .ci .color-view .desc, .ci .color-view .color-code {font-size: 15px;}

    /* group-signature */
    .ci .signature-area .title {font-size: 20px;}
    .ci .group-signature .logo-box .type {font-size: 15px;}
}