.inner{width:1720px;margin:0 auto;}
h3{font-size:3.15rem; font-weight: 700; color:#fff; line-height: 1.19;}
.btn-wrap a.more{display: inline-block; width:10.5rem; height:3.25rem; line-height: 3.25rem; background: #000; border:solid 1px #fff; color:#fff; text-align: left; padding:0 1.3rem; position: relative; white-space: nowrap; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform;}
.btn-wrap a.more:before, .btn-wrap a.more:after{content:''; display:block; position:absolute; width:16px; height:12px;background:url('/images/default/main/more.svg')no-repeat center center; background-size: 16px; top:50%; transform:translateY(-50%); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform;}
.btn-wrap a.more:before{left:0; opacity:0; transform: translate(0, -50%);}
.btn-wrap a.more:after{right:1.65rem;}
.btn-wrap a.more:hover{padding-left:3.5rem; background: var(--blue); border:solid 1px var(--blue);}
.btn-wrap a.more:hover:before{opacity: 1; transform: translate(1.4rem, -50%);}
.btn-wrap a.more:hover:after{opacity: 0; right:0;}
.txt-zone{color:#fff; z-index: 1; position: relative;}
.txt-zone .wh-txt{font-size:1.2rem; font-weight: 600; padding-top:2rem;}
@media (max-width:1720px){
    .inner{width:100%;padding:0 1rem;}
    h3{font-size:2.8rem;}
}
@media (max-width:1030px){
    h3{font-size:2rem; line-height: 1.5;}
    .txt-zone .wh-txt{padding-top:1rem;}
}

@keyframes blur {
    0%{
        filter: blur(10px);
        -webkit-filter: blur(10px);
        opacity: 0.5;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes blur2 {
    0%{
        filter: blur(10px);
        -webkit-filter: blur(10px);
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@keyframes motion {
    0% {
        right:1.9rem;
    }
    50% {
        right:2.5rem;
    }
    100% {
        right:1.9rem;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*******************비주얼*******************/
.visit-list .visit-btn{width:7.5rem; height:2.75rem; line-height: 2.75rem; border-radius:2rem; background: #fff; color:#191919; font-size:0.8rem; padding:0 1.3rem; position: relative;}
.visit-list .visit-btn:after{content:''; display:block; position:absolute; width:15px; height:9px;background:url('/images/default/main/arrow-down.svg')no-repeat center center; background-size: 15px; top:50%; transform:translateY(-50%); right:1.3rem; animation: bulb 0.8s ease-in-out infinite alternate;}
.visit-list ul{display: flex; justify-content: space-between; gap:2.5rem; margin-top:2.5rem;}
.visit-list ul li{background: rgb(0 0 0 / 50%); border-top:solid 1px #fff; width:calc(100%/5); position: relative;}
.visit-list ul li:after{content:''; display:block; position:absolute; width:1.75rem; height:1.75rem;background:#000 url('/images/default/main/arrow-right.svg')no-repeat center center; background-size: 8px; top:50%; transform:translateY(-50%); right:1.5rem; border-radius: 50%;}
.visit-list ul li:hover:after{background: var(--blue)url('/images/default/main/arrow-right.svg')no-repeat center center; background-size: 8px;}
.visit-list ul li a{padding:1.5rem 2rem; display: block;}
.visit-list ul li p{font-size:1.1rem; font-weight:600; color:#fff;}
.visit-list ul li p em{font-size:1rem; display: block;}
@keyframes bulb{
    0%{bottom:-0.5rem;}
    100%{bottom:0.5rem;transform:translateY(20%);}
}
@media (max-width:1600px){
    .visit-list ul{gap:1.5rem;}
    .visit-list ul li a{padding:1.5rem 1rem;}
    .visit-list ul li:after{right:1rem;}
    .visit-list ul li p{font-size: 1rem;}
    .visit-list .visit-btn{margin-bottom:1.5rem;}
}
@media (max-width:1030px){
    .visit-list ul{flex-wrap:wrap; gap:inherit; margin:-0.5rem; justify-content: flex-start;}
    .visit-list ul li{width:calc(100%/3 - 1rem); margin:0.5rem;}
}
@media (max-width:768px){
    .visit-list .visit-btn{display: none;}
    .visit-list ul{margin:-0.5rem;}
    .visit-list ul li{width:calc(100%/2 - 1rem); margin:0.5rem;}
    .visit-list ul li a{padding:1rem;}
}
@media (max-width:300px){
    .visit-list ul li a{padding:1rem;}
    .visit-list ul li:after{display: none;}
}


/*******************section01*******************/
.sec01{background: #fff; display:none;}
.sec01 .inner{display: flex; height:48rem;}
.sec01 .cts-l{width:78.197%; position:relative; padding:10rem 0;}
.sec01 .cts-l:before{content : ""; display : block; position : absolute; right:0; bottom:0; width :107.806%; height : 100%; background:#000 url('/images/default/main/sec01-bg.jpg')no-repeat center center; z-index:0;}
.sec01 .txt-zone{padding-bottom:8rem;}
.sec01.active .txt-zone{animation: blur 3s forwards;}
.sec01.active .btn-wrap{animation: blur 3s forwards;}
.sec01 .txt-zone h3{font-family: 'Poppins'}
.sec01 .product-zone{position:absolute; right:7.3rem; top:50%; transform:translateY(-50%);}
.sec01 .product-zone .proImg01{display: block;}
.sec01 .cts-r{width:calc(100% - 78.197%); padding:10rem 0 10rem 4.5rem;}
.sec01 .cts-r ul li{display: flex; padding:1rem 0; align-items: center; justify-content: space-between; position:relative; cursor: pointer;}
.sec01 .cts-r li .img-zone{filter: grayscale(1) contrast(0.5) opacity(0.3); transition: all ease 0.5s 0s;}
.sec01 .cts-r li.on .img-zone, .sec01 .cts-r li:hover .img-zone{filter: none;}
.sec01 .cts-r li .right-txt{text-align: right;}
.sec01 .cts-r li.on:before,
.sec01 .cts-r li:hover:before{content:''; display:block; position:absolute; width:100%; height:2px; background:#000; bottom:0; left:0;}
.sec01 .cts-r li .right-txt .tit{font-size:1.25rem; color:rgb(25 25 25 / 30%); font-weight: 600; transition: all ease 0.5s 0s;}
.sec01 .cts-r li.on .right-txt .tit,
.sec01 .cts-r li:hover .right-txt .tit{color:#191919;}
.sec01 .cts-r li .right-txt .txt{font-size:0.8rem; color:rgb(25 25 25 / 30%); padding-top:0.25rem; font-weight: 600; transition: all ease 0.5s 0s;}
.sec01 .cts-r li.on .right-txt .txt,
.sec01 .cts-r li:hover .right-txt .txt{color:#26348b;}
@media (min-width: 2000px) {
    .sec01 .cts-l:before{width:200%; background-size: cover;}
}
@media (max-width:1600px){
    .sec01 .inner{height:auto;}
    .sec01 .cts-l{width:70%; position:relative; padding:6rem 0;}
    .sec01 .cts-r{width:calc(100% - 70%); padding:6rem 0 6rem 3rem;}
    .sec01 .product-zone{right:3rem; width:40%;}
    .sec01 .product-zone .proImg{max-width: 100%;}
}
@media (max-width:1030px){
    .sec01 h3{line-height: 1.18;}
    .sec01 .inner{flex-direction: column-reverse; padding:0;}
    .sec01 .cts-l{width:100%; padding:2rem 2rem;}
    .sec01 .cts-l:before{background-size: cover;}
    .sec01 .cts-r{width:100%; padding:2rem 2rem 1rem;}
    .sec01 .cts-r ul{display: flex; flex-wrap:wrap; margin:-1rem;}
    .sec01 .cts-r ul li{width:calc(100%/4 - 2rem); margin:1rem;}
    .sec01 .product-zone{width:16rem; right:2rem; top:inherit; transform: none; bottom:2rem;}
    .sec01 .cts-r li .img-zone{width:40%;}
    .sec01 .cts-r li .img-zone img{max-width: 100%;}
    .sec01 .cts-r li .right-txt{width:calc(100% - 40%); padding-left:0.5rem;}
    .sec01.active .txt-zone{animation: blur 2s forwards;}
    .sec01.active .btn-wrap{animation: blur 2s forwards;}
}
@media (max-width:768px){
    .sec01 .txt-zone{padding-bottom:3rem;}
    .sec01 .cts-l{padding:4rem 1rem 14rem;}
    .sec01 .cts-r{padding:3.5rem 1.5rem 1rem 1rem;}
    .sec01 .cts-r ul{margin:-0.5rem; overflow-x:scroll; flex-wrap: unset;}
    .sec01 .cts-r ul::-webkit-scrollbar{
        display:none;
    }
    .sec01 .cts-r ul li{width:100%; margin:0.25rem 0.5rem 0.5rem; padding:0 ;}
    .sec01 .product-zone{width:12rem;}
    .sec01 .cts-r li .img-zone{display: none;}
    .sec01 .cts-r li .right-txt{width:100%; text-align: left; display: flex; align-items: flex-end; gap:0.5rem; padding:0 0 0.5rem;}
    .sec01 .cts-r li .right-txt .tit{font-size:1.1rem;}
}
@media (max-width:300px){
    .sec01 .cts-l{padding:2rem 2rem 16rem;}
}


/*******************section02*******************/
@keyframes us_Cricle {
    0% { transform: translateX(-50%) rotate(0); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

.sec02{background:#111;}
.three{position: relative; padding:8rem 0 10rem;}
.three:before{content : ""; display : block; position : absolute; left : 50%; width :38.8rem; height : 38.8rem; background:url('/images/default/content/earth.png')no-repeat center center; transform: translateX(-50%); top:13.5rem; animation: us_Cricle 30s infinite linear;}
.three .value{position:relative; text-align: center; padding-bottom:17.4rem; width:fit-content; height:fit-content; left:50%; transform: translateX(-50%);}
.three .value-top{padding-bottom:2.2rem; line-height: 1; color:#fff; font-family: 'Poppins';}
.three .value-top h3{line-height: 1;}
.three.active .value img.origin{animation: blur2 3s forwards;}
.three .circle{border-radius: 50%; width:10rem; height:10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; color:#fff; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.5s ease-in-out 1s; opacity: 0; background: #000;}
.three .circle:after{content:''; display:block; position:absolute; width:140%; height:140%; border:solid 1px rgb(221 221 221 / 50%); border-radius:50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;}
.three .circle p{font-size:1.25rem; font-weight:700;}
.three.active .circle{animation: fadeIn 0.5s ease-in-out 1s forwards;}
.three.active .circle01 { transform: translate(-26rem, -11rem);}
.three.active .circle02{ transform: translate(16rem, -11rem);}
.three.active .circle03{ transform: translate(-50%, 13.35rem);}
@media (max-width:1720px){
    .three .value-top .core{font-size:2.8rem;}
}
@media (max-width:1600px){
    .three .value{padding:0 3rem 17.4rem;}
    .three .value img.origin{max-width: 100%;}
}
@media (max-width:1030px){
    @keyframes us_Cricle {
        0% { transform: translate(-50%, -50%) rotate(0); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    .three{padding:4rem 0 4rem;}
    .three:before{background-size: 25rem; top:50%;}
    .three .value img.bold{width: 11rem;}
    .three .value img.origin{width: 22rem;}
    .three .value-top{padding-bottom:2rem;}
    .three .value-top .core{font-size:2rem;}
    .three .circle{width:8rem; height:8rem;}
    .three.active .value img.origin{animation: blur2 2s forwards;}
    .three.active .circle01{transform: translate(-20rem, -11rem);}
    .three.active .circle02{transform: translate(12rem, -11rem);}
    .three.active .circle03{transform: translate(-50%, 15rem);}
    .three .value{padding:0 3rem 10.5rem;}
    .three .circle:after{width:120%; height:120%;}
}
@media (max-width:768px){
    .three .value img.origin{width: 20rem;}
    .three .value-top{padding-bottom:1rem;}
    .three .circle{transform: translateX(-50%);}
    .three.active .circle{transform: translateX(-50%); transition: transform 0.5s ease-in-out 1s;}
    .three .circle01{top:inherit; bottom:0; transform: translateX(50%);}
    .three .circle02{top:inherit; right: auto; left:50%; bottom:0;}
    .three .circle03{top: auto; bottom:0;}
    .three.active .circle01{left:0;}
    .three.active .circle03{left:unset; right:0; transform: translateX(50%);}
}
@media (max-width:500px){
    .three.active .circle01{left:5rem;}
    .three.active .circle03{right:5rem;}
    .three .circle:after{width:110%; height:110%;}
}
@media (max-width:400px){
    .three .value{padding:4rem 3rem 10.5rem;}
    .three .circle{width:6.5rem; height:6.5rem;}
    .three .circle span{font-size:0.75rem; padding-bottom:0;}
    .three .circle p{font-size:1rem;}
}


/*******************section03*******************/
.sec03-visible #header{background: #000;}
.sec03-visible #header.over{background: #fff;}
.sec03-visible #wrap{overflow: clip;}
.sec03{background:#000; position: relative;}
.sec03 .inner{display: flex; z-index: 1; position: relative; height:100%;}
.sec03 .cts-l{width:23.1rem; position: sticky; padding:10rem 0 8rem; height: 100vh; top:0;}
.sec03 .cts-l:before{content : ""; display : block; position : absolute; right:0; bottom:0; width :125%; height : 100%; background:url('/images/default/main/history-bg.jpg')no-repeat right top; z-index:0;}
.sec03 .cts-r{width:calc(100% - 23.1rem); height: 100%; padding:10rem 0 8rem; padding-left:5.4rem;}
.sec03 .txt-zone{padding-bottom:8.5rem;}
.sec03.active .txt-zone{animation: blur 5s forwards;}
.sec03.active .txt-zone h3{font-family: 'Poppins';}
.sec03 .cts-l .his-tab{margin-top:3.65rem; width:12.5rem;}
.sec03 .cts-l .his-tab li{padding:0.85rem 0; border-bottom: solid 1px rgb(255 255 255 / 60%);}
.sec03 .cts-l .his-tab li a{color:rgb(255 255 255 / 60%); font-size:1.15rem;}
.sec03 .cts-l .his-tab li.on{ border-bottom-color: #fff;}
.sec03 .cts-l .his-tab li.on a{color:#fff;}
.sec03.active .btn-wrap{animation: blur 5s forwards;}
.sec03 .btn-wrap a.more{background: transparent;}
.sec03 .btn-wrap a.more:hover{background:var(--blue);}
.sec03 .timeline{position: relative; display: none;}
.sec03 .timeline01{display: block;}
.sec03 .timeline .item{display: flex; align-items: flex-start; position: relative;}
.sec03 .timeline .item:not(:last-child){padding-bottom:4.8rem;}
.sec03 .timeline .item.effect:after{height:calc(100% + 1rem); transition: all 0.8s;}
.sec03 .timeline .item:after{content: '';height: 0; background: #2b2bff; position: absolute; left: 12px; width: 2px;transition: all .3s;top: 0;z-index:1;}
.sec03 .timeline .subject{font-size:1.25rem; font-weight: 600; color:#fff; width:14rem; position: relative; padding-left:2.5rem; line-height: 1;}
.sec03 .timeline .item.effect .subject{color:#2b2bff;}
.sec03 .timeline .item .subject:before,
.sec03 .timeline .item .subject:after {content:''; position:absolute; display:block; border-radius:50%;}
.sec03 .timeline .item .subject:before {left:7px; top:7px; width:10px; height:10px; background-color:#2b2bff;}
.sec03 .timeline .item .subject:after {left:0; top:0; width:24px; height:24px; background-color:rgba(43, 43, 255, .35);}
.sec03 .timeline .bt-zone{width:calc(100% - 14rem);}
.sec03 .timeline .bt-zone > li{display: flex; font-size:1rem;}
.sec03 .timeline .bt-zone > li:not(:last-child){padding-bottom:2rem;}
.sec03 .timeline .bt-zone > li span{width:7rem; font-weight: bold; color:#fff;}
.sec03 .timeline .bt-zone > li .hi-info{width:calc(100% - 7rem); color:rgb(255 255 255 / 70%);}
.sec03 .timeline .bt-zone > li .hi-info li:not(:last-child){padding-bottom:0.3rem;}
.sec03 .timeline .status {position:absolute; left:12px; top:0; opacity: 1; margin-top:17px; width:2px; height:100%;background-color:rgb(255 255 255 / 60%);}
.sec03 .timeline .status .bar {position:absolute; left:0; top:0; display:block; width:2px; height:0; max-height:100%; background:#2b2bff; transition:height .3s;}
@media (min-width: 2000px) {
    .sec03 .cts-l:before{width:350%; background-size: cover;}
}
@media (max-width:1400px){
    .sec03 .timeline .item{flex-direction: column; gap:2rem;}
    .sec03 .timeline .subject{width:100%;}
    .sec03 .timeline .bt-zone{width:100%; padding-left:2.5rem;}
    .sec03 .cts-r{padding-left:3rem;}
    .sec03.active2 .cts-r{padding-left:26.1rem;}
}
@media (max-width:1030px){
    .sec03 .inner{flex-direction: column;}
    .sec03 .cts-l{width:100%; padding:2.5rem 0 1rem; position: relative; height: auto;}
    .sec03 .cts-l .his-tab{display: flex; flex-wrap: wrap; margin:-0.5rem; margin-top:0.5rem; width:calc(100% + 1rem);}
    .sec03 .cts-l .his-tab li{width:calc(100%/3 - 1rem); margin:0.5rem; padding:0.5rem 0; border-bottom:none;}
    .sec03 .cts-l .his-tab li.on{border-bottom:solid 2px #fff;}
    .sec03 .cts-l .his-tab li a{color: rgb(255 255 255 / 50%);}
    .sec03 .txt-zone{padding-bottom:0;}
    .sec03.active2 .cts-l{position: relative; top:inherit;}
    .sec03 .cts-l:before{width :150%; height : 100%; background-size: cover; right:-25%;}
    .sec03 .cts-r{padding:4rem 0; padding-left:0; width:100%;}
    .sec03.active2 .cts-r{padding-left:0; width:100%;}
    .sec03 .btn-wrap{position: absolute; top:4rem; right:0; display: none;}
    .sec03 .timeline .item:not(:last-child){padding-bottom:3rem; gap:1.5rem;}
    .sec03 .timeline .bt-zone > li:not(:last-child){padding-bottom:1.5rem;}
}
@media (max-width:768px){
    .sec03 .cts-l .his-tab li{}
    .sec03 .cts-l .his-tab li a{font-size:1.1rem;}
}


/*******************section04*******************/
.sec04{background: #000 url('/images/default/main/sec04-bg.jpg')no-repeat center center; height:48rem; padding:8rem 0;}
.sec04 .txt-zone{padding-top:9.3rem;}
.sec04.active .txt-zone{animation: blur 2s forwards;}
.sec04 .txt-zone h3{font-family: 'Poppins'}
.sec04 .inner{display: flex; justify-content: space-between;}
.sec04 .cts-r{width:41.279%;}
.sec04 .cts-r ul{display: flex; flex-wrap:wrap;}
.sec04 .cts-r ul li{width:calc(100%/2); background: rgb(0 0 0 / 50%); height:16rem; position:relative;}
.sec04 .cts-r ul li:not(:nth-child(1)):after{content:''; display:block; position:absolute; width:16px; height:12px; background: url('/images/default/main/more.svg')no-repeat center center; background-size: 16px; bottom:2.1rem; right:1.9rem;}
.sec04 .cts-r ul li:nth-child(1){background: none;}
.sec04 .cts-r ul li:nth-child(4){background: var(--blue);}
.sec04 .cts-r ul li a{color:#fff; padding:4.5rem 1.9rem 1rem; display: inline-block;}
.sec04 .cts-r .tit{font-size:1.25rem; font-weight: 600;}
.sec04 .cts-r .txt{font-size:1rem; color:rgb(255 255 255 / 60%); padding-top:2.6rem;}
.sec04 .cts-r ul li:hover:after{animation: motion 1.2s linear 0s infinite alternate;}
@media (min-width: 2000px) {
    .sec04{background-size: cover;}
}
@media (max-width:1600px){
    .sec04 .cts-r{width:55%;}
    .sec04 .cts-r ul li a{padding:3.5rem 1.5rem 1rem;}
}
@media (max-width:1030px){
    .sec04{height: auto; padding:4rem 0; background-size: cover;}
    .sec04 h3{line-height: 1;}
    .sec04 .txt-zone{padding-top:0;}
    .sec04 .inner{flex-direction: column; gap:2rem;}
    .sec04 .cts-r{width:100%;}
    .sec04 .cts-r .txt{padding-top:1rem;}
    .sec04 .cts-r ul li{width:calc(100%/3); height: auto;}
    .sec04 .cts-r ul li a{padding:2rem 1.5rem 5rem;}
    .sec04 .cts-r ul li:not(:nth-child(1)):after{bottom:1.5rem; right:1.5rem;}
    .sec04 .cts-r ul li:nth-child(1){display: none;}
    .sec04 .cts-r ul li:nth-child(3){background: var(--blue);}
    .sec04 .cts-r ul li:nth-child(4){background: rgb(0 0 0 / 50%);}
}
@media (max-width:768px){
    .sec04 .cts-r ul li{width:100%;}
    .sec04 .cts-r ul li a{padding:1.5rem 1rem 3rem;}
    .sec04 .cts-r ul li:not(:nth-child(1)):after{right:1rem; /*bottom:1rem;*/}
    .sec04 .cts-r .txt{padding-top:0.5rem;}
}