/*Corporate Identity*/
#sub-ci [class*="-container"] {background:#f2f2f2;border-radius:20px; }
#sub-ci [class*="-container"].light-mode {background: #F5F5F5;}
#sub-ci [class*="-container"].dark-mode {background: #000;}
#sub-ci [class*="-container"] .ci > img{max-width: 380px;object-fit: cover;}
#sub-ci [class*="-container"].dark-mode .ci img {filter: invert(1); mix-blend-mode: luminosity;}
#sub-ci .toggle-box {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;font-family: "Outfit", sans-serif;}
input:checked + .slider > .mode-label {right: 40px;color: #fff;}
#sub-ci .gw-txt-box > div{width: 50%;}
#sub-ci .gw-sub-con-100 .ci-container{background: #fff;}
#sub-ci .gw-sub-con-wrap {align-items: flex-start;}
#sub-ci .gw-sub-con {padding: 150px 0;}
#sub-ci [class*="gw-sub-con"]:not(:last-child) {margin-bottom: 0;}
#sub-ci .gw-con-tit {width: 25%;}
#sub-ci .gw-con-tit .gw-tit {font-size: var(--main-title03);letter-spacing: -0.05em;font-weight: 600;line-height: 1.25;}
#sub-ci .gw-con-box {width: 75%;border-top: 3px solid #000;padding-top: 40px;}
#sub-ci .gw-con-box .gw-con-txt {font-size: var(--main-title04);letter-spacing: -0.05em;font-weight: 400;line-height: 1.5;}
#sub-ci .gw-benefit-txt-con dl {padding: 40px 0;border-bottom: 1px dashed rgba(0, 0, 0, 0.1);}
#sub-ci .gw-benefit-txt-con dl dt {padding-left: 30px;position: relative;font-size: var(--main-title04);font-weight: 600;letter-spacing: -0.05em;color: #000;line-height: 1.4}
#sub-ci .gw-benefit-txt-con dl dt:before {content: "\e92b";font-family: xeicon;position: absolute;top: 0;left: 0;font-size: var(--main-title04);color: #000;}
#sub-ci .gw-benefit-txt-con dl dd {padding-top: 7px;padding-left: 30px;}
#sub-ci .gw-benefit-txt-con dl dd .gw-txt {padding-left: 10px;position: relative;font-size: var(--main-text01);font-weight: 400;letter-spacing: -0.05em;color: #555;line-height: 1.9;box-sizing: border-box;}
#sub-ci .gw-benefit-txt-con dl dd .gw-txt:before {content: "-";position: absolute;top: 0;left: 0;}
#sub-ci .gw-ci-box {display:flex;justify-content:space-between;padding: 30px;border-radius: 20px;border:3px solid #f2f2f2;}
#sub-ci .gw-ci-box .gw-img01 >  img{max-width: 300px;object-fit: cover;}
#sub-ci .gw-ci-box .gw-img02 >  img{width: 100%;object-fit: contain;}
#sub-ci .gw-gray-box {margin: 15px;padding: 30px;border-radius: 20px;background: #f9f9f9;font-size: var(--main-text01);line-height: 1.5;color: #555;}
#sub-ci .gw-gray-box .gw-txt {padding-left: 10px;position: relative;font-size: var(--main-text01);font-weight: 400;letter-spacing: -0.05em;color: #555;line-height: 1.9;box-sizing: border-box;}
#sub-ci .gw-gray-box .gw-txt:before {content: "-";position: absolute;top: 0;left: 0;}
#sub-ci .gw-btn-wrap{place-content: flex-start;}
#sub-ci .gw-color-card {margin-top:40px;display: flex;gap:15px;flex-wrap: wrap;}
#sub-ci .gw-color-card li {padding:30px;overflow: hidden;border-radius:20px;width: calc(33.3% - 15px);}
#sub-ci .gw-color-card .gw-color > span {font-size: var(--main-title04);letter-spacing: -0.025em;line-height: 1.5;font-weight: 600;color:#fff;}
#sub-ci .gw-color-card .gw-detail {border-top: 1px solid rgba(255,255,255,0.3);margin-top: 20px;padding-top: 20px;}
#sub-ci .gw-color-card .gw-detail dl {display: flex;justify-content: space-between;position: relative;}
#sub-ci .gw-color-card .gw-detail dl dt {line-height: 1.5;letter-spacing: -0.02em;color: #fff;}
#sub-ci .gw-color-card .gw-detail dl dd {line-height: 1.5;letter-spacing: -0.02em;color: #fff;font-weight: 500;word-break: keep-all;word-wrap: break-word}
#sub-ci .gw-color-card li:nth-child(1) {background: #000001;}
#sub-ci .gw-color-card li:nth-child(2) {background: #231F20;}
#sub-ci .gw-color-card li:nth-child(3),
#sub-ci .gw-color-card li:nth-child(4){background: #fff;}
#sub-ci .gw-color-card li:nth-child(5) {background: #F4F5F4;border:1px solid #eee;}
#sub-ci .gw-color-card li:nth-child(6) {background: #232534;}
#sub-ci .gw-color-card li:nth-child(3) .gw-color>span,
#sub-ci .gw-color-card li:nth-child(4) .gw-color>span,
#sub-ci .gw-color-card li:nth-child(5) .gw-color>span{color: #000}
#sub-ci .gw-color-card li:nth-child(3) .gw-detail,
#sub-ci .gw-color-card li:nth-child(4) .gw-detail,
#sub-ci .gw-color-card li:nth-child(5) .gw-detail{border-top: 1px solid rgba(0,0,0,0.15);}
#sub-ci .gw-color-card li:nth-child(3) .gw-detail dl dt,
#sub-ci .gw-color-card li:nth-child(4) .gw-detail dl dt,
#sub-ci .gw-color-card li:nth-child(5) .gw-detail dl dt{color: #000;}
#sub-ci .gw-color-card li:nth-child(3) .gw-detail dl dd,
#sub-ci .gw-color-card li:nth-child(4) .gw-detail dl dd,
#sub-ci .gw-color-card li:nth-child(5) .gw-detail dl dd{color: #000;}



/*반응형------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width:1280px){
    #sub-ci .gw-sub-con{padding:5rem 0;}
    #sub-ci .gw-sub-con-wrap{flex-direction:column;gap: 2rem;}
    #sub-ci .gw-con-tit{width: 100%;}
    #sub-ci .gw-con-box{width: 100%;}
    #sub-ci .gw-benefit-txt-con dl{padding:2rem 0;}
    #sub-ci .gw-btn-wrap{place-content: center;}
}

@media screen and (max-width:768px){
    #sub-ci .gw-w-20 {width: 50% !important;}
    #sub-ci [class*="-container"]{padding: 2rem 0;}
    #sub-ci [class*="-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 [class*="-container"] .ci > img{max-width:180px;}
    .switch{width: 80px;}
    .mode-label{font-size: 12px;}
    input:checked + .slider:before{transform: translateX(180%);}
    #sub-ci .gw-color-card li{padding:20px;width: 100%;}
    #sub-ci .gw-sub-con .gw-btn-wrap{flex-direction: column;}

}