/***************** sec01 *****************/
#sec01{width:100%;height:100vh;position: relative;background:#050505;}
#sec01 .container-lg{width:100%;height:100%;}

#mouse-scroll {position:absolute;margin: auto;left: 50%;bottom:40px;-webkit-transform: translateX(-50%);z-index:88;}
#mouse-scroll span{display: block;width: 5px;height: 5px;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);transform: rotate(45deg);border-right: 2px solid #fff;border-bottom: 2px solid #fff;margin: 0 0 3px 5px;}
#mouse-scroll .down-arrow-1, #mouse-scroll .down-arrow-2, #mouse-scroll .down-arrow-3 {-webkit-animation: mouse-scroll 1s infinite;-moz-animation: mouse-scroll 1s infinite;}
#mouse-croll .down-arrow-1 {-webkit-animation-delay: .1s;-moz-animation-delay: .1s;-webkit-animation-direction: alternate;}
#mouse-scroll .down-arrow-2 {-webkit-animation-delay: .2s;-moz-animation-delay: .2s;-webkit-animation-direction: alternate;}
#mouse-scroll .down-arrow-3 {-webkit-animation-delay: .3s;-moz-animation-dekay: .3s;-webkit-animation-direction: alternate;}
@keyframes mouse-scroll { 0% {opacity: 0;} 50% {opacity: 0.5;} 100% {opacity: 1;} }
@-webkit-keyframes mouse-scroll { 0% {opacity: 1;} 50% {opacity: .5;} 100% {opacity: 1;} }


.sec01_txt {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 10;color: #fff;text-align: center;}
.sec01_txt .display-lg{font-weight: bold;}
.sec01_txt h4{font-weight: 400;}


/* 보라색 테마 큐브 애니메이션 CSS */
.sec01-triangle { position: absolute; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; top: 0; left: 0; z-index: 20; }
.sec01-triangle .view { position: relative; width: 1000px; height: 1000px; perspective: 1000px; pointer-events: none; user-select: none; }
.sec01-triangle .cube {font-size:125px; animation: 10s infinite cubic-bezier(0.65, 0.05, 0.36, 1) reverse; position: absolute; transform-style: preserve-3d;  width: 1em; height: 1em; }
.sec01-triangle .cube .face { position: absolute; transform-style: preserve-3d; width: 100%; height: 100%; }
.sec01-triangle .cube .face::after, .sec01-triangle .cube .face::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; }
.sec01-triangle .cube .face::before { transform: rotateY(180deg) translateZ(0.5em); }
.sec01-triangle .cube .face::after { transform: translateZ(0.5em); }
.sec01-triangle .cube .face.x { transform: rotateX(90deg); }
.sec01-triangle .cube .face.y { transform: rotateY(90deg); }
.sec01-triangle .cube .x::after, .sec01-triangle .cube .x::before { background: #9C6CF5; }
.sec01-triangle .cube .y::after, .sec01-triangle .cube .y::before { background: #6C3CC5; }
.sec01-triangle .cube .z::after, .sec01-triangle .cube .z::before { background: #C5A0FF; }
.sec01-triangle .static .cube { animation-direction: normal; animation-play-state: paused; }
.sec01-triangle .part { height: 100%; width: 50%; overflow: hidden; position: absolute; }
.sec01-triangle .part .plane {font-size:125px; width: 1em; height: 1em; transform-style: preserve-3d; transform: rotateX(54.7356103172deg) rotateZ(45deg) translate(-2.4em, -1.2em); position: absolute; margin: auto;  top: 0; bottom: 0; }
.sec01-triangle .part:nth-child(1) { left: 0%; }
.sec01-triangle .part:nth-child(1) .plane { right: -0.5em; }
.sec01-triangle .part:nth-child(2) { left: 50%; }
.sec01-triangle .part:nth-child(2) .plane { left: -0.5em; }
@keyframes stepB { 0% { transform: translate3d(0em, 0em, 0em) scale3d(1, 1, 1); } 14.2857142857% { transform: translate3d(1.2em, 0em, 0em) scale3d(1, 1, 1); } 28.5714285714% { transform: translate3d(2.4em, 0em, 0em) scale3d(1, 1, 1); } 42.8571428571% { transform: translate3d(3.6em, 0em, 0em) scale3d(1, 1, 1); } 57.1428571429% { transform: translate3d(3.6em, 1.2em, 0em) scale3d(1, 1, 1); } 71.4285714286% { transform: translate3d(3.6em, 2.4em, 0em) scale3d(1, 1, 1); } 85.7142857143% { transform: translate3d(3.6em, 3.6em, 0em) scale3d(1, 1, 1); } 100% { transform: translate3d(3.6em, 3.6em, 1.2em) scale3d(1, 1, 1); } }
@keyframes stepA { 0% { transform: translate3d(0em, -2.4em, -3.6em) scale3d(1, 1, 1); } 14.2857142857% { transform: translate3d(0em, -1.2em, -3.6em) scale3d(1, 1, 1); } 28.5714285714% { transform: translate3d(0em, 0em, -3.6em) scale3d(1, 1, 1); } 42.8571428571% { transform: translate3d(0em, 0em, -2.4em) scale3d(1, 1, 1); } 57.1428571429% { transform: translate3d(0em, 0em, -1.2em) scale3d(1, 1, 1); } 71.4285714286% { transform: translate3d(0em, 0em, 0em) scale3d(1, 1, 1); } 85.7142857143% { transform: translate3d(1.2em, 0em, 0em) scale3d(1, 1, 1); } 100% { transform: translate3d(2.4em, 0em, 0em) scale3d(1, 1, 1); } }


.sec01_bg:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 1;}
#myCanvas {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:
            radial-gradient(ellipse 800px 600px at 20% 30%, rgba(140, 92, 245, 0.2) 0%, transparent 50%),
            radial-gradient(ellipse 700px 500px at 80% 70%, rgba(0, 255, 170, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse 600px 400px at 50% 50%, rgba(140, 92, 245, 0.1) 0%, transparent 60%),
            radial-gradient(1px 1px at 15% 25%, white, transparent),
            radial-gradient(2px 2px at 45% 15%, rgba(140,92,245,0.9), transparent),
            radial-gradient(1px 1px at 75% 45%, white, transparent),
            radial-gradient(2px 2px at 25% 65%, rgba(0,255,170,0.9), transparent),
            radial-gradient(1px 1px at 85% 75%, white, transparent),
            radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,0.7), transparent),
            radial-gradient(1px 1px at 65% 25%, rgba(140,92,245,0.7), transparent),
            radial-gradient(2px 2px at 55% 75%, white, transparent),
            radial-gradient(1px 1px at 15% 55%, rgba(0,255,170,0.6), transparent),
            radial-gradient(1px 1px at 90% 35%, white, transparent),
            radial-gradient(1px 1px at 20% 40%, rgba(255,255,255,0.5), transparent),
            radial-gradient(1px 1px at 60% 60%, rgba(140,92,245,0.5), transparent),
            radial-gradient(1px 1px at 80% 20%, rgba(0,255,170,0.5), transparent),
            #000;
    background-size: 100% 100%;
}



/***************** sec02 *****************/
#sec02{background:#000;position: relative;padding:300px 0;}
#sec02 .sec_con{max-width: 1780px;}
.sec02_pt_wrap{display:flex;}
.sec02_pt{width:50%;position:relative;}
.sec02_pt.pt_lf {height:400px;}
.sec02_pt.pt_rt{display:flex;align-items:center;}

#sec02 .sec_title {width: 100%;max-width: 100%;z-index: 1;margin-bottom:0;font-size:56px;text-align:left;font-weight:300; color:#fff;line-height:1.2;transition-duration: 0.4s;word-break:keep-all;}
#sec02 .sec_title h1{color:#fff;}
#sec02 .sec_title p{width:100%;max-width:900px;margin:30px auto 0;text-align:left;color:#ccc;font-size:20px;line-height:1.4;}

.sec02_bg {width:90%;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);z-index: -1;opacity:0.65;display: flex;align-items: center;justify-content: center;}
.sec02_bg svg {width: 100%;transform: scale(1.1);}

.fade_txt{font-weight:800 !important;}
.fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }



/***************** sec03 *****************/

.sec03_pt_wrap{display:flex;margin:0 -10px;padding-top: 60px;}
.sec03_pt {width: 25%;padding: 0 10px;text-align:center;}
.sec03_icon {width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;margin: 0 auto;position: relative;}

.sec03_pt h4{font-size:26px;font-weight:900;color:#000;margin:30px auto 15px;}
.sec03_pt p{font-size:18px;font-weight:400;color:#999;margin: 0 auto;width:75%;}

.sec03_pt.pt01 .sec03_icon{padding:5px 0;}
.sec03_pt.pt01 .path_wrap {width: 100%;height: 100%;position: relative;}
.sec03_pt.pt01 .path{width:100%;height:6px;background:#000;position: absolute;left:0;}
.sec03_pt.pt01 .path1{top:0;}
.sec03_pt.pt01 .path1:after {content: '';position: absolute;-webkit-animation: sec03-ani01 3s cubic-bezier(0, 0, 0.03, 0.9) infinite;animation: sec03-ani01 3s cubic-bezier(0, 0, 0.03, 0.9) infinite;height:6px;background:var(--primary);width: 100%;left: 0;}
.sec03_pt.pt01 .path2{top:25%;}
.sec03_pt.pt01 .path2:after{content: '';position: absolute;-webkit-animation: sec03-ani01 3s cubic-bezier(0, 0, 0.03, 0.9) infinite;animation: sec03-ani01 3s cubic-bezier(0, 0, 0.03, 0.9) infinite;height:6px;background:var(--primary);width: 100%;left: 0;}
.sec03_pt.pt01 .path3{top:50%;}
.sec03_pt.pt01 .path4{top:75%;}
@keyframes sec03-ani01 { 0%, 44%, 88.1%, 100% {transform-origin: left;} 0%, 100%, 88% {transform: scaleX(0);} 44.1%, 88% {transform-origin: right;} 33%, 44% {transform: scaleX(1);} }

.sec03-ani02 {position: absolute;height:48px;width:48px;border: solid 6px #000;display: inline-block;}
.sec03_pt.pt02 .sec03_icon:before {content:'';width: 6px;height:100%;background:var(--primary);position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);z-index:1;animation: sec03-ani02 1.5s infinite alternate;}
.sec03_pt.pt02 .sec03_icon:after {content:'';width:100%;height: 6px;background:var(--primary);position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);z-index:1;animation: sec03-ani03 1.5s infinite alternate;}

@keyframes sec03-ani02 { 100% {height:60%;} }@-webkit-keyframes sec03-ani02 {100% {height:60%;}}
@keyframes sec03-ani03 { 100% {width:60%;} }@-webkit-keyframes sec03-ani02 {100% {width:60%;}}

.sec03_pt.pt03 .path{position: absolute;width:27.12px;height:27.12px;border:6px solid #000;}
.sec03_pt.pt03 .path1{top:0;left:0;border:6px solid var(--primary);}
.sec03_pt.pt03 .path2{top:0;right:0; animation: sec03-ani03-01 3.6s infinite;}
.sec03_pt.pt03 .path3{bottom:0;left:0;animation: sec03-ani03-02 3.6s infinite;}
.sec03_pt.pt03 .path4{bottom:0;right:0;border:6px solid var(--primary);animation: sec03-ani03-03 3.6s infinite;}

@keyframes sec03-ani03-01 {
    0% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    25% {-webkit-transform: translate(0,33px);transform: translate(0,33px)}
    50% {-webkit-transform: translate(0,0);transform: translate(0,0)}
}
@keyframes sec03-ani03-02 {
    50% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    75% {-webkit-transform: translate(33px,0);transform: translate(33px,0)}
    100% {-webkit-transform: translate(0,0);transform: translate(0,0)}
}
@-webkit-keyframes sec03-ani03-03 {
    0% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    25% {-webkit-transform: translate(0,-33px);transform: translate(0,-33px) }
    50% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    75% {-webkit-transform: translate(-33px,0);transform: translate(-33px,0)}
    100% {-webkit-transform: translate(0,0);transform: translate(0,0)}
}

.sec03_pt.pt04 .sec03_icon {}
.sec03_pt.pt04 .sec03_icon:before {content: '';width:21px;height:60px;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);background-image: url('../img/main/sec03-04-01.png');background-repeat: no-repeat;background-position: center;background-size: contain;animation: sec03-ani04-01 3s infinite;}
.sec03_pt.pt04 .sec03_icon:after {content: '';width:40px;height: 40px;position: absolute;left: 50%;top: 0;transform: translateX(-50%);background-image: url('../img/main/sec03-04-02.png');background-repeat: no-repeat;background-position: center;background-size: contain;animation: sec03-ani04-02 3s infinite;}
@keyframes sec03-ani04-01 {
    0% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    50% {-webkit-transform: translate(-10px,0);transform: translate(-10px,0)}
    100% {-webkit-transform: translate(0,0);transform: translate(0,0)}
}
@keyframes sec03-ani04-02 {
    0% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    50% {-webkit-transform: translate(10px,0);transform: translate(10x,0)}
    100% {-webkit-transform: translate(0,0);transform: translate(0,0)}
}


/***************** sec04 *****************/
#sec04{background:#050505;position: relative;}
#sec04:after{content: '';background: url("../img/main/sec04-00.png");position: absolute;top:0;left:-5%;width:1322px;height:1597px;}

.sec04_pt_wrap{display:flex;margin:0 -30px;}
.sec04_pt{width:50%;padding:0 30px;}
.sec04_pt.pt_rt{padding-top:60px;}

.sec04_box {background:transparent;}
.sec04_box .sec04_con{width:100%;min-height: 520px;background: #fff;margin-bottom:50px;padding: 60px 50px;display: flex;flex-flow: column;justify-content: space-between;transition:1s;}
.sec04_box h2{font-size:40px;color:#101010;font-weight:800;margin-top:15px;transition:all 0.3s;}
.sec04_box p{font-size:20px;color:#999;font-weight:400;position: relative;padding-left:10px;transition:all 0.3s;margin-bottom: 10px;}
.sec04_box p:last-child{margin-bottom: 0;}
.sec04_box p:before{content: '';position: absolute;top:10px;left:0;width:4px;height:4px;background:#999;transition:all 0.3s;}
.sec04_box .sec04_icon img{transition:all 0.3s;}
.sec04_box.active .sec04_con{background: var(--primary);transition:1s;}
.sec04_box.active h2{color:#fff;}
.sec04_box.active p{color:#fff;}
.sec04_box.active p:before{background:#fff;}
.sec04_box.active .sec04_icon img{mix-blend-mode: color-dodge;filter: invert(1);}

/***************** sec05 *****************/
.sec05_pt_wrap{}
.sec05_pt_wrap ul li:first-child .sec05_link{border-top:1px solid #efefef;}

.sec05_link {display:flex;align-items:center;padding:50px 0;border-bottom:1px solid #efefef;width: 100%;transition-property: all;transition-duration: .3s;transition-timing-function: ease-out;font-size: 1.4rem;line-height: 1.5;margin-top: 0.6rem;margin-bottom: 0.4rem;background-image: linear-gradient(transparent calc(100% - 0.25rem), rgba(222, 30, 37, 1) 0.25rem);background-position: 0 100%;background-size: 0 5px;background-repeat: no-repeat;}
.sec05_link .date{width:12%;color:#101010;font-weight:800;font-size:20px;transition-property: all;transition-duration: .3s;transition-timing-function: ease-out;}
.sec05_link p{width:80%;padding:0 10px;color:#101010;font-weight:800;font-size:20px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition-property: all;transition-duration: .3s;transition-timing-function: ease-out;}
.sec05_link .ico{width:8%;text-align: right;opacity:0.6;color:#050505;font-size:20px;transition-property: all;transition-duration: .3s;transition-timing-function: ease-out;}

.sec05_link:hover {background-size: 100% 5px;}
.sec05_link:hover .date{color:var(--primary);}
.sec05_link:hover p{color:var(--primary);}
.sec05_link:hover .ico{color:var(--primary);}

#sec05 .sec_title{margin-bottom:0;}
.news_btn {margin-top:60px;font-size:90px;font-weight:800;color: #000;display:flex;align-items:center;margin-left:-20px;position: relative;transition:0.2s;}
.news_btn .ico{color:#000;transition:0.2s;}
.news_btn:hover .ico{color:var(--primary);transform: rotate(45deg);}


/***************** media *****************/
@media(max-width:1410px){
    #sec02 .sec_title{font-size:40px;}
}

@media(max-width:1010px){
    .sec03_pt_wrap{flex-flow:row wrap;padding-top:20px;}
    .sec03_pt{width:50%;margin-bottom: 40px;}
}
@media(max-width:850px){
    #sec02{ padding: 100px 0;}
    .sec02_pt_wrap{flex-flow: column;}
    .sec02_pt{width:100%;}
    #sec02 .sec_title{text-align:center;}
    #sec02 .sec_title p{text-align:center;}
    .sec02_pt.pt_lf {order: 1;display: flex;}

    .sec04_pt_wrap{margin:0 auto;flex-flow: column;}
    .sec04_pt.pt_rt{padding-top:0;}
    .sec04_pt{width:100%;padding:0;}
    .sec04_box .sec04_con{min-height:420px;margin-bottom:20px;padding:40px;}

    .sec05_link .date{font-size:18px;}
    .sec05_link p{font-size:18px;}
}
@media(max-width:650px){
    .sec03_pt p{width:100%;}


    .sec04_box .sec04_con {padding:30px;min-height: 330px;}
    .sec04_box p{font-size:16px;}
    .sec04_box p:before{top:9px;}

    .sec05_link{flex-flow: column;align-items:flex-start;padding:30px 0;}
    .sec05_link p{width:100%;padding:0;}
    .sec05_link .ico{display:none;}
    .sec05_link p{font-size:16px;}
    .sec05_link .date{display: flex;order: 1;margin-top: 10px;font-size:14px;}
}
@media(max-width:450px){
    #sec02 .sec_title{font-size:30px;}
    #sec02 .sec_title p{font-size:14px;}
    .sec02_pt.pt_lf {height:300px;}

    .sec03_pt h4{width:60%;font-size:18px;margin: 20px auto 12px;}
    .sec03_pt p{font-size:14px;}
    .sec03_icon{width:40px;height:40px;}
    .sec03_pt.pt01 .sec03_icon{padding: 8px 0 4px;}
    .sec03_pt.pt01 .path{height:4px;}
    .sec03_pt.pt01 .path1:after,.sec03_pt.pt01 .path2:after{height:4px;}
    .sec03_pt.pt02 .sec03_icon:before{width:4px;}
    .sec03_pt.pt02 .sec03_icon:after{height:4px;}
    .sec03-ani02{width:30px;height:30px;border: solid 4px #000;}
    .sec03_pt.pt03 .path{width: 19.12px;height: 19.12px;border:4px solid #000;}
    .sec03_pt.pt03 .path1{border:4px solid var(--primary);}
    .sec03_pt.pt03 .path4{border:4px solid var(--primary);}
    @keyframes sec03-ani03-01 {
        0% {-webkit-transform: translate(0,0);transform: translate(0,0)}
        25% {-webkit-transform: translate(0,21px);transform: translate(0,21px)}
        50% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    }
    @keyframes sec03-ani03-02 {
        50% {-webkit-transform: translate(0,0);transform: translate(0,0)}
        75% {-webkit-transform: translate(21px,0);transform: translate(21px,0)}
        100% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    }
    @-webkit-keyframes sec03-ani03-03 {
        0% {-webkit-transform: translate(0,0);transform: translate(0,0)}
        25% {-webkit-transform: translate(0,-21px);transform: translate(0,-21px) }
        50% {-webkit-transform: translate(0,0);transform: translate(0,0)}
        75% {-webkit-transform: translate(-21px,0);transform: translate(-21px,0)}
        100% {-webkit-transform: translate(0,0);transform: translate(0,0)}
    }
    .sec03_pt.pt04 .sec03_icon:before{width: 20px;height: 24px;}
    .sec03_pt.pt04 .sec03_icon:after{width: 20px;height: 24px;}

    .sec04_box .sec04_con{}
    .sec04_box h2{font-size:30px;}
}