#sub-vision .gw-vision-list{position:relative;height: 600px;overflow:hidden;}
#sub-vision .gw-vision-list > div{position: absolute;}
#sub-vision .gw-vision-list .gw-img{overflow: hidden;}
#sub-vision .gw-vision-list .gw-img > img{transform: scale(1.2);transition: all 1s;}
#sub-vision .gw-vision-list.active .gw-img > img{transform: scale(1.0);}
#sub-vision .gw-vision-list .gw-text-container{padding:50px; bottom: 0;width:calc(100% - 250px);background: #fff;}
#sub-vision .gw-vision-list .gw-text-left{left: 0;}
#sub-vision .gw-vision-list .gw-text-right{right: 0;}
#sub-vision .gw-vision-list .gw-title {font-size: var(--main-title03);}
#sub-vision .gw-vision-list .gw-text {line-height: 1.75;color: #666;}

/*Corporate Identity*/
#sub-vision h1{font-size:2.4em; color:#333; text-align: center;}
#sub-vision h2{font-size:1.6em; color:#555; text-align: center;}
#sub-vision h4{font-size:1.2em; color:#666; text-align: center;}
#sub-vision  .ci-container {padding:80px 0;background:#fff;border:1px solid #ddd; border-radius: 16px;}
#sub-vision  .ci-container.light-mode {background: #fff;}
#sub-vision  .ci-container.dark-mode {background: #000;}
#sub-vision  .ci-container .ci > img{max-width: 380px;object-fit: cover;}
#sub-vision  .ci-container.dark-mode .ci img {filter: invert(1); mix-blend-mode: luminosity;}
#sub-vision  .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-vision  .color{display:inline-block;width: 18px;height: 18px;border-radius: 100%;}
#sub-vision  .color01{background: #0000FF;}
#sub-vision  .color02{background: #000;}

/*Color System*/
#sub-vision  .color-box{padding: 40px;}
#sub-vision  .color-box01{background: #0000FF;}
#sub-vision  .blue{color: #0000FF;}
#sub-vision  .color-box02{background: #000;}
#sub-vision  .black{color: #000;}
#sub-vision  .red{color: #D10F0F;}
#sub-vision  .color-box03{background: #0B6DDD; border-radius: 16px;}
#sub-vision  .color-code {background: #F2F2F2;padding: 40px;}

/*반응형------------------------------------------------------------------------------------------------------------------ */

@media screen and (max-width:1024px){
    #sub-vision .gw-vision-list{height: 450px;}
    #sub-vision .gw-vision-list .gw-text-container{padding: 60px;width: 100%;}
}

@media screen and (max-width:576px){
    #sub-vision .gw-vision-list{height:auto;}
    #sub-vision .gw-vision-list:not(:last-child) {margin-bottom: 20px;}
    #sub-vision .gw-vision-list > div{position:relative;}
    #sub-vision .gw-vision-list .gw-text-container{padding: 20px;}
}

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

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