@charset "UTF-8";

@font-face {
    font-family: 'WavvePADO';
    src: local('웨이브 파도'), local('Wavve PADO'), local('웨이브 파도TTF'), local('Wavve PADO TTF'), 
    url('../fonts/WavvePADO-Regular.eot') format('eot'), 
    url('../fonts/WavvePADO-Regular.woff') format('woff'), 
    url('../fonts/WavvePADO-Regular.woff2') format('woff2'),
    url('../fonts/WavvePADO-Regular.otf') format('opentype'), 
    url('../fonts/WavvePADO-Regular.ttf') format('truetype');
    font-weight: 400;
}

.relocation .bg {display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.67) 100%), url('../img/relocation/relocation-element.jpg'); background-size: cover; background-position: center;}

.title1 {text-align: center;}

.relocation img {width: 100%; height: 100%; object-fit: contain; display: block;}

section:not(.bg)>* + * {margin-top: 80px;}
section:not(.bg) + section {margin-top: 150px;}

/* 이전 계획 수립 */
.ul-category {display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--inner-gap);}
.ul-category>.category {padding: 0px 10px; display: flex; flex-direction: column; align-items: center; border-radius: 6px; border: 1px solid #EC008C; background: #fff;}
.ul-category>.category .tit {width: 100%; padding: 7px 0px; border-radius: 0px 0px 6px 6px; background: #EC008C; color: #fff; text-align: center; font-size: 1.25rem; font-weight: 700;}
.ul-category>.category .txt {padding: 10px; color: var(--primary, #555); text-align: center; margin: auto;}
/* //이전 계획 수립 */


/* 사전 준비 작업 및 점검 수행 */
.ul-preparation {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--inner-gap);}
.ul-preparation>.step {display: -webkit-flex; display: flex; justify-content: center; align-items: stretch; border-radius: 6px; border: 1px solid #2A219F; background: #fff; overflow: hidden;}
.ul-preparation>.step, 
.ul-relocation>.step {counter-increment: index;}

.ul-preparation>.step .txt-area {width: 100%;}
.ul-preparation>.step .txt-area .tit {padding: 7px 0px 7px 52px; background: #2A219F; color: #fff; text-align: center; font-size: 1.25rem; font-weight: 700; overflow: hidden; position: relative;}
.ul-preparation>.step .txt-area .tit::before {content: counter(index); width: 40px; height: 100%; padding-top: 2px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #A9A4E1; color: #fff; text-align: center; font-family: 'WavvePADO'; font-size: 1.25rem; font-weight: 400; line-height: 100%; position: absolute; top: 0; bottom: 0; left: 0;}
.ul-preparation>.step .txt-area .tit::after {content: ''; position: absolute; left: 39px; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-left-color: #A9A4E1; border-right: 0; margin-top: -20px; margin-right: -20px;}
.ul-preparation>.step .ul-task {padding: 10px;}
.ul-preparation>.step .ul-task .task {font-size: 15px; font-weight: 400; line-height: 170%; letter-spacing: -0.03em; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-preparation>.step .ul-task .task::before {content: ''; -webkit-flex-shrink: 0; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #2A219F; display: block; margin: calc((15px*1.7 - 5px)/2) 10px;}

.ul-preparation>.step .img-area {width: 183px; height: 100%;}
.ul-preparation>.step .img-area img {object-fit: cover;}
/* //사전 준비 작업 및 점검 수행 */


/* 데이터센터 이전 수행 */
.ul-relocation {display: grid; grid-template-columns: repeat(4, 1fr); gap: 63px var(--inner-gap);}

.ul-relocation>.step {position: relative; background: #fff;}

.ul-relocation>.step::before {content: ''; width: 100%; height: 4px; display: block; position: absolute; top: -34px; left: 0;}
.ul-relocation>.step::after {content: ''; width: 50px; height: 22px; padding: 5px 9px; display: block; position: absolute; top: -42px; left: calc(100% - 10px); z-index: 1; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='50' height='22' viewBox='0 0 50 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.15' fill-rule='evenodd' clip-rule='evenodd' d='M9 5L15.5264 10.5255L9 16.0406V5Z' fill='black'/%3E%3Cpath opacity='0.29' fill-rule='evenodd' clip-rule='evenodd' d='M21.5264 5L28.0528 10.5255L21.5264 16.0406V5Z' fill='black'/%3E%3Cpath opacity='0.5' fill-rule='evenodd' clip-rule='evenodd' d='M34.0527 5L40.5791 10.5255L34.0527 16.0406V5Z' fill='black'/%3E%3C/svg%3E "); background-repeat: no-repeat;}

.ul-relocation .step .tit {height: 38px; padding: 7px 0px; border-radius: 6px 6px 0px 0px; color: #fff; text-align: center; font-size: 1.25rem; font-weight: 700; position: relative; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.ul-relocation>.step .tit::before {content: counter(index); width: 36px; height: 36px; padding-top: 2px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #fff; color: #fff; text-align: center; font-family: 'WavvePADO'; font-size: 1.25rem; font-weight: 400; line-height: 100%; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 2;}

.ul-relocation>.step:first-child::before {width: 360px; margin-left: -30px;}

.ul-relocation>.step:first-child::before, 
.ul-relocation .step:first-child .tit, 
.ul-relocation>.step:first-child .tit::before {background-color: #07024B;}

.ul-relocation>.step:nth-child(2)::before, 
.ul-relocation .step:nth-child(2) .tit, 
.ul-relocation>.step:nth-child(2) .tit::before {background-color: #0A0553;}

.ul-relocation>.step:nth-child(3)::before, 
.ul-relocation .step:nth-child(3) .tit, 
.ul-relocation>.step:nth-child(3) .tit::before {background-color: #0D085A;}

.ul-relocation>.step:nth-child(4)::before, 
.ul-relocation .step:nth-child(4) .tit, 
.ul-relocation>.step:nth-child(4) .tit::before {background-color: #110A62;}

.ul-relocation>.step:nth-child(5)::before, 
.ul-relocation .step:nth-child(5) .tit, 
.ul-relocation>.step:nth-child(5) .tit::before {background-color: #140D6A;}

.ul-relocation>.step:nth-child(6)::before, 
.ul-relocation .step:nth-child(6) .tit, 
.ul-relocation>.step:nth-child(6) .tit::before {background-color: #171071;}

.ul-relocation>.step:nth-child(7)::before, 
.ul-relocation .step:nth-child(7) .tit, 
.ul-relocation>.step:nth-child(7) .tit::before {background-color: #1A1379;}

.ul-relocation>.step:nth-child(8)::before, 
.ul-relocation .step:nth-child(8) .tit, 
.ul-relocation>.step:nth-child(8) .tit::before {background-color: #1D1680;}

.ul-relocation>.step:nth-child(9)::before, 
.ul-relocation .step:nth-child(9) .tit, 
.ul-relocation>.step:nth-child(9) .tit::before {background-color: #201988;}

.ul-relocation>.step:nth-child(10)::before, 
.ul-relocation .step:nth-child(10) .tit, 
.ul-relocation>.step:nth-child(10) .tit::before {background-color: #241B90;}

.ul-relocation>.step:nth-child(11)::before, 
.ul-relocation .step:nth-child(11) .tit, 
.ul-relocation>.step:nth-child(11) .tit::before {background-color: #271E97;}

.ul-relocation>.step:nth-child(12)::before, 
.ul-relocation .step:nth-child(12) .tit, 
.ul-relocation>.step:nth-child(12) .tit::before {background-color: #2A219F;}

.connection-line, 
.connection-line2, 
.connection-line3 {width: 31px; height: 285px; position: absolute;}

.ul-relocation>.step .img-area {height: 180px; border-radius: 0 0 6px 6px; overflow: hidden;}
.ul-relocation>.step .img-area img {object-fit: cover;}
/* //데이터센터 이전 수행 */





@media screen and (max-width:1200px){
    .ul-category {grid-template-columns: repeat(3, 1fr);}

    .ul-preparation {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (min-width:993px){
    .ul-relocation>.step:first-child {order: 1;}
    .ul-relocation>.step:nth-child(2) {order: 2;}
    .ul-relocation>.step:nth-child(3) {order: 3;}
    .ul-relocation>.step:nth-child(4) {order: 4;}
    .ul-relocation>.step:nth-child(5) {order: 8;}
    .ul-relocation>.step:nth-child(6) {order: 7;}
    .ul-relocation>.step:nth-child(7) {order: 6;}
    .ul-relocation>.step:nth-child(8) {order: 5;}
    .ul-relocation>.step:nth-child(9) {order: 9;}
    .ul-relocation>.step:nth-child(10) {order: 10;}
    .ul-relocation>.step:nth-child(11) {order: 11;}
    .ul-relocation>.step:nth-child(12) {order: 12;}

    .ul-relocation>.step:nth-child(-n+4) {margin-top: 30px;}
    
    .ul-relocation>.step:nth-child(4)::after, 
    .ul-relocation>.step:nth-child(5)::after, 
    .ul-relocation>.step:nth-child(12)::after {display: none;}

    .ul-relocation>.step:nth-child(6)::after, 
    .ul-relocation>.step:nth-child(7)::after, 
    .ul-relocation>.step:nth-child(8)::after {background-image: url("data:image/svg+xml,%3Csvg width='50' height='22' viewBox='0 0 50 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' fill-rule='evenodd' clip-rule='evenodd' d='M15.5264 5L9 10.4004L15.5264 15.7904V5Z' fill='black'/%3E%3Cpath opacity='0.29' fill-rule='evenodd' clip-rule='evenodd' d='M28.0527 5L21.5264 10.4004L28.0527 15.7904V5Z' fill='black'/%3E%3Cpath opacity='0.15' fill-rule='evenodd' clip-rule='evenodd' d='M40.5687 5L34.0527 10.4004L40.5687 15.7904V5Z' fill='black'/%3E%3C/svg%3E");}

    .ul-relocation>.step:nth-child(4) .connection-line {top: -34px; left: calc(100% - 1px);}
    .ul-relocation>.step:nth-child(8) .connection-line {top: -34px; right: calc(100% - 1px);}
    .ul-relocation>.step:nth-child(12) .connection-line {height: 270px; top: -34px; left: calc(100% - 1px);}
    
    .ul-relocation>.step:nth-child(3) .connection-line2, 
    .ul-relocation>.step:nth-child(9) .connection-line2 {display: none;}
    .ul-relocation>.step:nth-child(6) .connection-line2 {display: none;}
    .ul-relocation>.step:nth-child(12) .connection-line2 {display: none;}
    
    .ul-relocation>.step:nth-child(2) .connection-line3, 
    .ul-relocation>.step:nth-child(6) .connection-line3, 
    .ul-relocation>.step:nth-child(10) .connection-line3 {display: none;}
    .ul-relocation>.step:nth-child(4) .connection-line3, 
    .ul-relocation>.step:nth-child(8) .connection-line3 {display: none;}
    .ul-relocation>.step:nth-child(12) .connection-line2 {display: none;}
}

@media screen and (max-width:992px){
    .ul-preparation>.step .img-area {width: 160px;}

    .ul-relocation>.step::before {width: calc(100% - 10px);}
    .ul-relocation>.step:first-child::before {width: calc(100% + 30px); margin-left: -16px;}
}

@media screen and (min-width:769px) and (max-width:992px){
    .ul-relocation {grid-template-columns: repeat(3, 1fr);}

    .ul-relocation>.step:first-child {order: 1;}
    .ul-relocation>.step:nth-child(2) {order: 2;}
    .ul-relocation>.step:nth-child(3) {order: 3;}
    .ul-relocation>.step:nth-child(4) {order: 6;}
    .ul-relocation>.step:nth-child(5) {order: 5;}
    .ul-relocation>.step:nth-child(6) {order: 4;}
    .ul-relocation>.step:nth-child(7) {order: 7;}
    .ul-relocation>.step:nth-child(8) {order: 8;}
    .ul-relocation>.step:nth-child(9) {order: 9;}
    .ul-relocation>.step:nth-child(10) {order: 12;}
    .ul-relocation>.step:nth-child(11) {order: 11;}
    .ul-relocation>.step:nth-child(12) {order: 10;}
    
    .ul-relocation>.step:nth-child(3)::after, 
    .ul-relocation>.step:nth-child(4)::after, 
    .ul-relocation>.step:nth-child(9)::after, 
    .ul-relocation>.step:nth-child(10)::after {display: none;}

    .ul-relocation>.step:nth-child(5)::after, 
    .ul-relocation>.step:nth-child(6)::after, 
    .ul-relocation>.step:nth-child(11)::after, 
    .ul-relocation>.step:nth-child(12)::after {background-image: url("data:image/svg+xml,%3Csvg width='50' height='22' viewBox='0 0 50 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' fill-rule='evenodd' clip-rule='evenodd' d='M15.5264 5L9 10.4004L15.5264 15.7904V5Z' fill='black'/%3E%3Cpath opacity='0.29' fill-rule='evenodd' clip-rule='evenodd' d='M28.0527 5L21.5264 10.4004L28.0527 15.7904V5Z' fill='black'/%3E%3Cpath opacity='0.15' fill-rule='evenodd' clip-rule='evenodd' d='M40.5687 5L34.0527 10.4004L40.5687 15.7904V5Z' fill='black'/%3E%3C/svg%3E");}
    
    .ul-relocation>.step:nth-child(4) .connection-line {display: none;}
    .ul-relocation>.step:nth-child(8) .connection-line {display: none;}
    .ul-relocation>.step:nth-child(12) .connection-line {display: none;}
    
    .ul-relocation>.step:nth-child(3) .connection-line2, 
    .ul-relocation>.step:nth-child(9) .connection-line2 {top: -34px; left: calc(100% - 11px);}
    .ul-relocation>.step:nth-child(6) .connection-line2 {top: -34px; right: calc(100% - 11px);}
    .ul-relocation>.step:nth-child(12) .connection-line2 {height: 270px; top: -34px; right: calc(100% - 11px);}
    
    .ul-relocation>.step:nth-child(2) .connection-line3, 
    .ul-relocation>.step:nth-child(6) .connection-line3, 
    .ul-relocation>.step:nth-child(10) .connection-line3 {display: none;}
    .ul-relocation>.step:nth-child(4) .connection-line3, 
    .ul-relocation>.step:nth-child(8) .connection-line3 {display: none;}

    .ul-relocation>.step:nth-child(6)::before, 
    .ul-relocation>.step:nth-child(7)::before, 
    .ul-relocation>.step:nth-child(12)::before {left: auto; right: 0;}
}

@media screen and (max-width:768px){
    .ul-category {grid-template-columns: repeat(2, 1fr);}

    .ul-preparation {grid-template-columns: unset;}

    .ul-relocation {grid-template-columns: repeat(2, 1fr);}

    .ul-relocation>.step:first-child {order: 1;}
    .ul-relocation>.step:nth-child(2) {order: 2;}
    .ul-relocation>.step:nth-child(3) {order: 4;}
    .ul-relocation>.step:nth-child(4) {order: 3;}
    .ul-relocation>.step:nth-child(5) {order: 5;}
    .ul-relocation>.step:nth-child(6) {order: 6;}
    .ul-relocation>.step:nth-child(7) {order: 8;}
    .ul-relocation>.step:nth-child(8) {order: 7;}
    .ul-relocation>.step:nth-child(9) {order: 9;}
    .ul-relocation>.step:nth-child(10) {order: 10;}
    .ul-relocation>.step:nth-child(11) {order: 12;}
    .ul-relocation>.step:nth-child(12) {order: 11;}
    
    .ul-relocation>.step:nth-child(2)::after, 
    .ul-relocation>.step:nth-child(3)::after, 
    .ul-relocation>.step:nth-child(6)::after, 
    .ul-relocation>.step:nth-child(7)::after, 
    .ul-relocation>.step:nth-child(10)::after, 
    .ul-relocation>.step:nth-child(11)::after {display: none;}

    .ul-relocation>.step:nth-child(4)::after, 
    .ul-relocation>.step:nth-child(8)::after, 
    .ul-relocation>.step:nth-child(12)::after {background-image: url("data:image/svg+xml,%3Csvg width='50' height='22' viewBox='0 0 50 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' fill-rule='evenodd' clip-rule='evenodd' d='M15.5264 5L9 10.4004L15.5264 15.7904V5Z' fill='black'/%3E%3Cpath opacity='0.29' fill-rule='evenodd' clip-rule='evenodd' d='M28.0527 5L21.5264 10.4004L28.0527 15.7904V5Z' fill='black'/%3E%3Cpath opacity='0.15' fill-rule='evenodd' clip-rule='evenodd' d='M40.5687 5L34.0527 10.4004L40.5687 15.7904V5Z' fill='black'/%3E%3C/svg%3E");}
    
    .ul-relocation>.step:nth-child(4) .connection-line {display: none;}
    .ul-relocation>.step:nth-child(8) .connection-line {display: none;}
    .ul-relocation>.step:nth-child(12) .connection-line {display: none;}
    
    .ul-relocation>.step:nth-child(3) .connection-line2, 
    .ul-relocation>.step:nth-child(9) .connection-line2 {display: none;}
    .ul-relocation>.step:nth-child(6) .connection-line2 {display: none;}
    
    .ul-relocation>.step:nth-child(2) .connection-line3, 
    .ul-relocation>.step:nth-child(6) .connection-line3, 
    .ul-relocation>.step:nth-child(10) .connection-line3 {top: -34px; left: calc(100% - 11px);}
    .ul-relocation>.step:nth-child(4) .connection-line3, 
    .ul-relocation>.step:nth-child(8) .connection-line3 {top: -34px; right: calc(100% - 11px);}
    .ul-relocation>.step:nth-child(12) .connection-line2 {height: 270px; top: -34px; right: calc(100% - 11px);}
    
    .ul-relocation>.step:nth-child(4)::before, 
    .ul-relocation>.step:nth-child(5)::before, 
    .ul-relocation>.step:nth-child(8)::before, 
    .ul-relocation>.step:nth-child(9)::before, 
    .ul-relocation>.step:nth-child(12)::before {left: auto; right: 0;}
}

@media screen and (max-width:480px){
    .ul-preparation>.step {flex-direction: column;}
    .ul-preparation>.step .txt-area {order: 2;}
    .ul-preparation>.step .img-area {order: 1;}
    .ul-preparation>.step .img-area {width: 100%; height: 183px;}
}

@media screen and (max-width:375px){
    .ul-category {grid-template-columns: unset;}
}