/*Corporate Identity*/
#sub-ci .ci-container {padding:150px 0;background:#fff;border:1px solid #ddd;}
#sub-ci .ci-container.light-mode {background: #fff;}
#sub-ci .ci-container.dark-mode {background: #000;}
#sub-ci .ci-container .ci > img{max-width: 380px;object-fit: cover;}
#sub-ci .ci-container.dark-mode .ci img {filter: invert(1); mix-blend-mode: luminosity;}
#sub-ci .toggle-container {display: flex;align-items: center;place-content: flex-end;}
.switch {position: relative;display: inline-block;width: 90px;height: 34px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background: #ddd;transition: 0.4s;border-radius: 30px;}
.slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 5%;bottom: 4px;background: #fff;transition: 0.4s;border-radius: 50%;}
input:checked + .slider {background: #000;}
input:checked + .slider:before {transform: translateX(215%);}
.mode-label {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: #666;}
input:checked + .slider > .mode-label {right: 40px;color: #fff;}
#sub-ci .color{display:inline-block;width: 18px;height: 18px;border-radius: 100%;}
#sub-ci .color01{background: #0000FF;}
#sub-ci .color02{background: #000;}

/*Color System*/
#sub-ci .color-box{padding: 80px 40px 40px;}
#sub-ci .color-box01{background: #0000FF;}
#sub-ci .color-box02{background: #000;}
#sub-ci .color-code {background: #F2F2F2;padding: 40px;}

/*반응형------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width:768px){
    #sub-ci .gw-w-15 {width: 20% !important;}
    #sub-ci .ci-container{padding: 75px 0;}
    #sub-ci .ci-container .ci > img{max-width:280px;}
    #sub-ci .color-box{padding:40px 20px 20px;}
    #sub-ci .color-code{padding:20px;}
}

@media screen and (max-width:576px){
    #sub-ci .gw-w-15 {width: 50% !important;}
    #sub-ci .ci-container .ci > img{max-width:180px;}
    .switch{width: 80px;}
    .mode-label{font-size: 12px;}
    input:checked + .slider:before{transform: translateX(180%);}
    #sub-ci .ci-info {flex-direction: column;align-items: flex-start;gap: 10px;}
    #sub-ci .ci-color {flex-direction: column;align-items: flex-start;gap: 5px;}
    #sub-ci .color-system-container {flex-wrap: wrap;}
}