/* --------------------------------main common-------------------------------- */
section {width:100%; height:100vh; overflow:hidden; position:relative}
section .inner {}
section .empty{position:absolute}

#container{padding-top:0 !important}

@media screen and (max-width:1024px) {
    section {height:calc(var(--var, 1vh) * 100)}
}
/* --------------------------------//main common-------------------------------- */



/* --------------------------------sec1------------------------------ */
.sec1{background-color:#0A0A0A}
.sec1 .inner{height:100%;perspective:500px;z-index:10}
.sec1 .text_box{position:absolute;z-index:3;width:46rem}
.sec1 .text_box1{height:13rem;top:50%;left:0;transform:translateY(calc(-50% - 4.625rem))}
.sec1 .text_box2{top:50%;right:0;transform:translateY(calc(-50% + 8.75rem))}
.sec1 .text_box .text{font-size:5rem;line-height:6.25rem;font-weight:900;color:#FDFDFD;text-align:left}
.sec1 .text_box .blink{animation:blink .5s infinite;font-size:5rem;opacity:1}
.sec1 .text_box.start .blink{animation:none;display:none}
.sec1 .text_box .clear + .blink{animation:none;opacity:0;transition:all .3s ease-in-out}
/*.sec1 .vec{background-position:center;background-repeat:no-repeat;background-size:contain;position:absolute;opacity:0;transition:all .2s ease;perspective:500px;transform-origin:bottom center;transform-style:preserve-3d}*/
/*.sec1 .vec1{width:40.875rem;height:26.75rem;right:2.2%;background-image:url(/front/images/main/sec1_vec1.svg);animation:vec1_ani 16s infinite linear}*/
/*.sec1 .vec2{width:26.25rem;height:28rem;left:0;background-image:url(/front/images/main/sec1_vec2.svg);animation:vec2_ani 16s infinite linear}*/
/*.sec1 .vec3{width:29.25rem;height:30.625rem;right:3.5%;background-image:url(/front/images/main/sec1_vec3.svg);animation:vec3_ani 16s infinite linear}*/
.sec1 .scroll{font-size:1rem;line-height:1rem;font-weight:900;color:#FFF;position:absolute;bottom:7.7%;right:50%;transform:translateX(50%);opacity:0;transition:all .3s ease-in-out}
.sec1 .scroll::before,.sec1 .scroll::after{content:'';display:block;width:15px;height:10px;background:url(/front/images/main/sec1_scroll.png) center / 100% auto no-repeat;position:absolute;right:50%;transform:translate(50%,0)}
.sec1 .scroll::before{bottom:-23px}
.sec1 .scroll::after{bottom:-31px}
.sec1 .scroll.fadeUp{opacity:0;animation:fadeUp .3s forwards ease-in-out}
.sec1 .scroll.active{opacity:1;animation:updown 2s infinite ease-in-out}
.sec1 .visual_video_wrap{position:absolute;top:0;left:0;right:0;bottom:0;width:100vw;height:calc(var(--var,1vh) * 100);z-index:0}
.sec1 .visual_video_inner{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);height:100%;width:100%}
.sec1 .visual_video_cont{height:100%;width:100%;object-fit:cover}

@keyframes blink {
    to {opacity:0}
}
@keyframes vec1_ani {
    0% {opacity:0; bottom:0; transform:translateY(100%)}
    1% {opacity:1}
    48% {opacity:1; bottom:100vh; transform:translateY(0)/*transform:rotate3d(0.2,0.5,0.5,20deg) translate3d(20px,50px,20px)*/}
    50% {opacity:0}
    100% {opacity:0}
}
@keyframes vec2_ani {
    0% {opacity:0}
    30% {opacity:0; bottom:0; transform:scale(0.8) rotate(-10deg) translateY(100%)}
    32% {opacity:1}
    70% {opacity:1; bottom:100vh; transform:scale(1) rotate(0deg)}
    72% {opacity:0}
    100% {opacity:0}
}
@keyframes vec3_ani {
    0% {opacity:0}
    60% {opacity:0; bottom:0; transform:scale(0.5) rotate(10deg) translateY(100%)}
    62% {opacity:1}
    98% {opacity:1; bottom:100vh; transform:scale(1) rotate(0deg)}
    100% {opacity:0; bottom:100vh}
}
@keyframes fadeUp {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes updown {
    0% {transform:translate(50%,0); -moz-transform:translate(50%,0); -webkit-transform:translate(50%,0); -o-transform:translate(50%,0); -ms-transform:translate(50%,0)}
    50% {transform:translate(50%,-10px); -moz-transform:translate(50%,-10px); -webkit-transform:translate(50%,-10px); -o-transform:translate(50%,-10px); -ms-transform:translate(50%,-10px)}
    100% {transform:translate(50%,0); -moz-transform:translate(50%,0); -webkit-transform:translate(50%,0); -o-transform:translate(50%,0); -ms-transform:translate(50%,0)}
}

@media screen and (max-width:1280px) {
    .sec1 .text_box .text {font-size:4rem; line-height:5rem}
}/*md*/

@media screen and (max-width:1024px) {
    .sec1 .text_box {width:100%; text-align:center}
    .sec1 .text_box1 {top:25%; left:50%; transform:translate(-50%, calc(-50%))}
    .sec1 .text_box2 {top:75%; left:50%; transform:translate(-50%, calc(-50% - 8rem))}
    .sec1 .scroll {bottom:15vh}
    .sec1 .text_box .text {text-align:center}
}/*md*/
@media screen and (max-width:1024px) {
    .sec1 .text_box {height:6.46rem}
    .sec1 .text_box .text {font-size:2.46rem; line-height:3.23rem; font-weight:700; text-align:center}
    .sec1 .text_box .blink {animation:blink .5s infinite; font-size:2.3rem}
    .sec1 .vec1 {width:80%; height:0; padding-bottom:52%; right:-22%; animation:vec1_ani 16s infinite linear}
    .sec1 .vec2 {width:43%; height:0; padding-bottom:89%; left:0; background-image:url(/front/images/main/sec1_vec2.svg); animation:vec2_ani 16s infinite linear}
    .sec1 .vec3 {width:54%; height:0; padding-bottom:100%; right:-1rem; background-image:url(/front/images/main/sec1_vec3.svg); animation:vec3_ani 16s infinite linear}
}/*sm*/

/* --------------------------------//sec1------------------------------ */



/* --------------------------------sec2------------------------------ */
.sec2{background:url(/front/images/main/sec2_bg.png) center top / cover no-repeat}
.sec2 .inner{height:100%;perspective:500px}
.sec2 .compass_box{position:absolute;right:50%;top:50%;width:41.5rem;height:37.75rem;background:url(/front/images/main/sec2_compass.png) center center /contain no-repeat;transform:translate(50%,-50%);transform-origin:center center}
.sec2 .sec2_logo{position:absolute;right:50%;top:50%;width:11.25rem;height:11.5rem;background:url(/front/images/main/sec2_logo.svg) center center /100% auto no-repeat;transform:translate(50%,-50%);transform-origin:center center}
.box1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:1px;border-radius:100%;background:#fff;overflow:hidden}
.sec2 .text_box .text_inner{width:100%;height:49vh;position:absolute;top:50%;right:50%;transform:translate(50%,50%)}
.sec2 .text_box [class^="text"]{font-size:3rem;line-height:4rem;font-weight:700;color:#FDFDFD;position:absolute}
.sec2 .text_box .text1{top:0;left:0}
.sec2 .text_box .text2{bottom:0;right:0}
.sec2 .text_box2{display:inline-block;font-size:80px;font-weight:800;white-space:nowrap;-webkit-text-fill-color:#D7D7D7;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0}
.sec2 .text_box2 .text_inner{width:100%;max-width:890px;height:19.25rem}
.sec2 .text_box2 [class^="text"]{position:absolute}
.sec2 .text_box2 .text1{top:0;left:50%;transform:translate(-50%,0);width:22.5rem;height:7.125rem}
.sec2 .text_box2 .text1 img{width:100%;height:auto}
.sec2 .text_box2 .text2{bottom:0;left:50%;transform:translate(-50%,0);font-size:3rem;line-height:4rem;font-weight:400;color:#FDFDFD;text-align:center}
.sec2 .text_box2 .text2 span{font-size:2rem;line-height:2.625rem;font-weight:400;color:#FDFDFD;display:block;padding-top:1rem}
.sec2 .text_box3{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}
.sec2 .text_inner{position:relative}
.mask{mix-blend-mode:lighten;color:#000;background-color:#fff}
.sec2 .text_box3{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}
.sec2 .text_box3 [class^="text"]{font-size:5rem;line-height:6.25rem;font-weight:900}
.sec2 .text_box3 .text1{color:#E6E8EB;-webkit-text-fill-color:#E6E8EB}
.sec2 .text_box3 .text2{position:absolute;top:0;left:0;color:#161b20;-webkit-text-fill-color:#161B20;width:0;white-space:nowrap;overflow:hidden;opacity:1}
.sec2 .text_box4{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}
.sec2 .text_box4 .text_inner{width:1138px;height:6.25rem;margin-bottom:2.5rem}
.sec2 .text_box4 [class^="text"]{font-size:5rem;line-height:6.25rem;font-weight:900;color:#161B20;text-align:center}
.sec2 .text_box4 .text1{position:absolute;left:0}
.sec2 .text_box4 .text2{position:absolute;left:19.75rem}
.sec2 .text_box4 .text3{position:absolute;right:0}
.sec2 .text_box4 .text4{font-size:3rem;line-height:4rem;font-weight:500;position:unset}

@media screen and (max-width:1280px) {
    .sec2 .text_box [class^="text"],
    .sec2 .text_box2 .text2 {font-size:2.4rem; line-height:3.2rem}
    .sec2 .text_box2 .text2 span {font-size:1.6rem; line-height:2.1rem}
    .sec2 .text_box3 [class^="text"] {font-size:4rem; line-height:5rem}
    .sec2 .text_box4 .text_inner {width:56.66rem; height:5rem}
    .sec2 .text_box4 [class^="text"] {font-size:4rem; line-height:5rem}
    .sec2 .text_box4 .text1 {left:0}
    .sec2 .text_box4 .text2 {left:15.7rem/*235px*/}
    .sec2 .text_box4 .text3 {right:0}
    .sec2 .text_box4 .text4 {font-size:2.25rem; line-height:3rem}

}/*md*/
@media screen and (max-width:1024px) {
    .sec2 .text_box .text_inner {height:auto; transform:translate(50%, calc(-100% - 4.3rem))}
    .sec2 .text_box [class^="text"] {width:100%; text-align:center}
    .sec2 .text_box .text1,
    .sec2 .text_box .text2 {position:unset}
    .sec2 .text_box .text2 {margin-top:16px}
    .sec2 .compass_box {opacity:0; width:246px; height:225px; top:50%; transform:translate(50%,0)}
    .sec2 .sec2_logo {width:85px; height:87px}
}/*md*/
@media screen and (max-width:1024px) {
    .sec2 .text_box,
    .sec2 .text_box2,
    .sec2 .text_box2 [class^="text"] {font-size:1.54rem; line-height:2.46rem}
    .sec2 .text_box2 .text_inner {height:auto}
    .sec2 .text_box2 [class^="text"] {position:unset; transform:none}
    .sec2 .text_box2 .text1 {width:148px; height:46px; margin:0 auto}
    .sec2 .text_box2 .text2 {margin-top:3.08rem}
    .sec2 .text_box2 .text2 span {font-size:1.08rem; line-height:1.54rem; margin-top:1.85rem}
    .sec2 .text_box3,
    .sec2 .text_box3 [class^="text"],
    .sec2 .text_box4,
    .sec2 .text_box4 [class^="text"] {font-size:2.46rem; line-height:3.23rem; text-align:center}
    .sec2 .text_box4 .text_inner {width:auto; height:auto; margin-bottom:24px}
    .sec2 .text_box4 [class^="text"] {position:unset; display:block}
    .sec2 .text_box4 .text4 {font-size:1.85rem; line-height:2.76rem}
}/*sm*/
/* --------------------------------//sec2------------------------------ */


/* --------------------------------sec3------------------------------ */
.sec3 .text_box{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}
.sec3 .text_box .text_inner{position:relative;width:100%;max-width:57rem}
.sec3 .text_box .text1{position:relative}
.sec3 .text_box .text2{position:absolute;top:0;right:0;display:block;width:100%;height:100%;background-color:#FFF}
.sec3 .card_box{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:100%;height:auto;min-height:64vh}
.sec3 .card{position:absolute;width:calc((100% - 48px)/3);height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8vh;background-color:rgba(255,255,255,0.8);box-shadow:10px 10px 60px rgba(120,120,120,0.1);backdrop-filter:blur(20px)}
.sec3 .card1{left:0}
.sec3 .card2{right:50%;transform:translate(50%)}
.sec3 .card3{right:0}
.sec3 .card h3{font-size:3.4vw;line-height:120%;font-weight:700;color:#444;text-align:center}
.sec3 .card p{font-size:1.5rem;line-height:2.25rem;font-weight:400;color:#444;text-align:center}

@media screen and (max-width:1024px) {
    .sec3 .card_box {width:88%; }
    .sec3 .card {width:100%; min-height:60.625vh; gap:2.46rem}
    .sec3 .card1,
    .sec3 .card2,
    .sec3 .card3 {right:unset; transform:unset; left:0}
    .sec3 .card h3 {font-size:2.46rem; line-height:3.23rem}
    .sec3 .card p {font-size:1.24rem; line-height:2.15rem}
}/*sm*/

/* --------------------------------//sec3------------------------------ */



/* --------------------------------sec4------------------------------ */
.sec4 {height:50vh}
.sec4 .inner {display:flex; justify-content:center; align-items:center; width:100%; height:100%}
.sec4 .text_box .text1 {font-size:5rem; line-height:6.25rem; font-weight:900; color:#161B20}

@media screen and (max-width:1280px) {
    .sec4 .text_box .text1 {font-size:4rem; line-height:5rem}
}/*md*/
@media screen and (max-width:1024px) {
.sec4 .text_box .text1 {font-size:2.46rem; line-height:3.23rem}
}/*sm*/
/* --------------------------------//sec4------------------------------ */


/* --------------------------------sec5------------------------------ */
.sec5 .pin_tit{font-size:1.5rem;line-height:2.25rem;font-weight:500;color:#161B20;position:absolute;top:0;left:0}
.sec5 .pin_tit img{width:17px;height:17px;display:inline-block;margin-left:8px}
.sec5 .cont_box{width:100%;height:80vh;display:flex;justify-content:center;align-items:center;position:relative;margin-top:20vh}
.sec5 .cont{font-size:1.25rem;line-height:2.5rem;position:absolute;top:0;right:50%;transform:translate(50%,0);width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between}
.sec5 .text_box{width:454px;margin-top:20vh;opacity:0;transition:opacity .2s,transform .5s ease-in-out}
.sec5 .text_box span{font-size:1.5rem;line-height:2.25rem;font-weight:700;color:#161B20;display:block}
.sec5 .text_box h3{font-size:4.5rem;line-height:5.75rem;font-weight:700;color:#161B20}
.sec5 .text_box p{font-size:1.25rem;line-height:2rem;font-weight:500;color:#5A6470;text-align:left;margin-top:2rem}
.sec5 .img_box{opacity:0;width:40.8%;max-width:578px;height:fit-content;max-height:797px;padding:5px 4px 0;position:relative;transition:all .2s ease-in-out;border-radius:50px 50px 0 0;overflow:hidden;box-shadow:10px 10px 20px rgba(0,0,0,0.08);align-self:flex-end}
.sec5 .img_box::before{content:'';border:8px solid #fff;position:absolute;top:0;right:0;z-index:3;width:100%;height:100%;border-bottom:none;border-radius:50px 50px 0 0;overflow:hidden}
.sec5 .img_box img{height:auto;overflow:hidden;border-radius:50px 50px 0 0;object-position:center}
.sec5 .active{z-index:3;transition:all .2s ease-in-out}
.sec5 .active .text_box{opacity:1}
.sec5 .active .img_box{opacity:1}
.sec5 .award_box{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;margin-top:8px}
.sec5 .award_box a{font-size:.875rem;line-height:2.25rem;font-weight:500;color:#5A6470;height:2.25rem;padding:0 .75rem;position:relative;display:inline-flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;background-color:#F7F7F8;transition:all .2s ease-in-out}
.sec5 .award_box a::before{content:'';margin-right:2px;width:12px;height:12px;background:url(/front/images/main/ico_award.png) center/100% auto no-repeat}
.sec5 .award_box a::after{content:'';width:5px;height:8px;background:url(/front/images/main/sec5_arrow.png) center/100% auto no-repeat}

@media screen and (max-width:1024px) {
    .sec5 .pin_tit img {width:12px; height:12px}
    .sec5 .cont_box {margin-top:4.92rem; height:calc((var(--var, 1vh) * 100) - 4.92rem)}
    .sec5 .cont {height:calc(var(--var, 1vh) * 100)}
    .sec5 .pin_tit,
    .sec5 .text_box span {font-size:1.24rem; line-height:2.15rem}
    .sec5 .text_box h3 {font-size:2.46rem; line-height:3.23rem}
    .sec5 .text_box p {font-size:1.08rem; line-height:1.54rem}
    .sec5 .cont {flex-direction:column; align-items:center; gap:3.38rem}
    .sec5 .text_box {width:100%; margin-top:4rem}
    .sec5 .img_box {width:70%;max-width:366px; max-height:744px; align-self:center; padding:4px 3px 0;border-radius:26px 26px 0 0}
    .sec5 .img_box::before{border-width:5px;border-radius:26px 26px 0 0}
    .sec5 .img_box img{border-radius:26px 26px 0 0}
    .sec5 .award_box a{font-size:.93rem;line-height:1.85rem;height:1.85rem;padding:0 .62rem}
}/*sm*/
@media (hover:hover) {
    .sec5 .award_box a:hover {color:#FDFDFD; background-color:#0A0A0A}
    .sec5 .award_box a:hover::after {content:''; width:5px; height:8px; background:url(/front/images/main/sec5_arrow_on.png) center/100% auto no-repeat; animation:move .8s linear infinite}
}/*hover*/

@keyframes move {
    0% {transform:translateX(0)}
    50% {transform:translateX(2px)}
    100% {transform:translateX(0)}
}
/* --------------------------------//sec5------------------------------ */


/* --------------------------------sec6------------------------------ */
.sec6{background:#333}
.sec6 .inner{width:100%;max-width:unset;height:calc(var(--var,1vh) * 100);display:flex;justify-content:center;flex-direction:column;align-items:center;gap:1.625rem;background:#333}
.sec6 .scroll_wrap{width:100%;overflow-x:hidden;overflow-y:hidden}
.sec6 .sec_tit{font-size:4rem;line-height:5rem;font-weight:700;color:#fdfdfd;width:88%;max-width:1440px;margin:0 auto}
.sec6 ul{display:flex;gap:1.5rem;padding:0 calc((100vw - 1440px)/2);box-sizing:border-box}
.sec6 ul li.project_box{flex-shrink:0!important;position:relative}
.sec6 ul li.link_box{display:flex;align-items:flex-end;height:auto;max-height:65.4vh}
.sec6 ul li.project_box{display:block;position:relative;border-radius:10px;overflow:hidden;width:56vw;max-width:1074px;height:auto;max-height:65.4vh;box-sizing:border-box}
.sec6 .imgBox{position:relative}
.sec6 .imgBox img{width:100%;object-fit:cover}
.sec6 .imgBox::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)}
.sec6 .txtBox{position:absolute;bottom:0;left:0;width:100%;height:100%;padding:4.125rem;display:flex;justify-content:flex-end;align-items:flex-start;flex-direction:column}
.sec6 .txtBox h3{width:100%}
.sec6 .txtBox h3 img{width:auto;object-fit:contain}
.sec6 .project_box:nth-child(1) .txtBox h3 img{width:calc(314/1080*100%)}
.sec6 .project_box:nth-child(2) .txtBox h3 img:first-child{width:calc(383/1080*100%)}
.sec6 .project_box:nth-child(2) .txtBox h3 img{width:calc(380/1080*100%)}
.sec6 .project_box:nth-child(3) .txtBox h3 img{width:calc(314/1080*100%)}
.sec6 .txtBox h3.db img:first-child{margin-bottom:4%}
.sec6 .txtBox p{font-size:1.875rem;line-height:100%;font-weight:400;color:#fff;margin-top:2.625rem;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec6 .btn_more{font-size:2rem;line-height:2.625rem;font-weight:700;color:#FFF;padding:0 0 4.125rem;width:auto;height:auto;display:block;overflow:visible;margin-right:5rem}
.sec6 .btn_more .arr{position:relative;overflow:hidden;height:27px;width:0;transition:opacity .05s,transform .15s ease}
.sec6 .btn_more .arr i{position:absolute;top:50%;left:0;font-size:16px;transition:all ease .2s;transform:translateY(-50%) rotate(20deg);width:24px;height:26px;opacity:0;background:url(/front/images/main/sec6_logo_w.png) center / 100% auto no-repeat}

@keyframes rotate {
    0% {transform:translate(-50%,-50%) rotate(0)}
    100% {transform:translate(-50%,-50%) rotate(360deg)}
}

@media screen and (min-width:1024.1px) and (hover:hover) {
    .sec6 .btn_more:hover .arr {width:26px; height:27px}
    .sec6 .btn_more:hover .arr i {left:13px; transform:translateY(-50%) rotate(0); opacity:1}
}/* hover */
@media screen and (max-width:1560px) {
    .sec6 ul {padding:0 6%}
}/*lg*/

@media screen and (max-width:1024px) {
    .sec6{height:auto}
    .sec6 .inner{width:88%;height:auto;gap:3.08rem;padding:4.92rem 0 2.76rem}
    .sec6 .scroll_wrap{height:auto;overflow:visible}
    .sec6 .sec_tit{font-size:2.46rem;line-height:3.23rem;width:100%}
    .sec6 ul{width:100%;padding:0;margin:0 auto;display:block;gap:0}
    .sec6 ul li.project_box{width:100%;margin:0 auto 1.85rem;letter-spacing:.02em;transition:.3s;padding:0;border-radius:8px}
    .sec6 .txtBox{padding:1.24rem}
    .sec6 .txtBox h3.db img:first-child{margin-bottom:0.6rem}
    .sec6 .txtBox p{font-size:1.08rem;line-height:1.54rem;margin-top:0.8rem}
    .sec6 .btn_more{font-size:1.24rem;line-height:2.15rem;position:unset;margin:1.24rem auto 0;text-align:center;border-bottom:1px solid #696969;width:max-content;border-radius:0;padding:0}
    .sec6 .btn_more .arr{width:16px}
    .sec6 .btn_more .arr i{width:12px;height:13px;position:unset;display:inline-block;margin-left:4px;transform:translateY(0) rotate(0);opacity:1}
}/*sm*/
/* --------------------------------//sec6------------------------------ */


/* --------------------------------sec7------------------------------ */
.sec7{height:calc(100vh - 262px);overflow:hidden;background:#0A0A0A}
.sec7 .inner{height:44.5%;padding:6.375rem 0;display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:1rem}
.sec7 .sec_tit1{font-size:2rem;line-height:2.625rem;font-weight:700;color:#FFF;opacity:0}
.sec7 .sec_tit2{font-size:1.5rem;line-height:2rem;font-weight:500;color:#FFF;text-align:right;opacity:0}
.sec7 .sec_tit1.on{animation:fadeIn .3s forwards ease-in-out}
.sec7 .sec_tit2.on{animation:fadeIn .3s .15s forwards ease-in-out}
.sec7 .hover_wrap{position:relative;width:100%;height:54.5%;display:block;overflow:hidden}
.sec7 .hover_wrap::before{content:'';display:block;position:absolute;top:50%;right:50%;transform:translate(50%,-50%) scale(1);z-index:0;width:100%;height:100%;background:url(/front/images/main/sec7_bg1.png) center center / cover no-repeat;transition:all .3s ease-in-out}
.sec7 .hover_wrap::after{content:'';display:block;width:100%;height:1px;position:absolute;top:0;right:50%;transform:translateX(50%);background:linear-gradient(0deg,#3468b2 5%,#8acece 95%);background:-webkit-linear-gradient(0deg,#3468b2 5%,#8acece 95%);background:-o-linear-gradient(0deg,#3468b2 5%,#8acece 95%);background:-ms-linear-gradient(0deg,#3468b2 5%,#8acece 95%);background:-moz-linear-gradient(0deg,#3468b2 5%,#8acece 95%)}
.sec7 .hover_wrap p{font-size:2rem;line-height:2.625rem;font-weight:700;color:#fff;text-transform:uppercase}
.sec7 .hover_wrap .link{font-size:1.5rem;line-height:2rem;font-weight:500;color:#fff;display:block;width:fit-content;margin-top:2.5rem;position:relative;transition:all ease .2s;border-bottom:1px solid #BEC1C7;padding-bottom:4px}
.sec7 .hover_wrap .text_box{width:88%;max-width:1440px;height:100%;margin:0 auto;position:relative;z-index:3;font-size:5.25rem;line-height:6rem;text-align:left;display:flex;flex-direction:row;gap:1rem;justify-content:space-between;align-items:center}
.sec7 .hover_wrap .link .arr{position:relative;overflow:hidden;height:30px;width:0;transition:opacity .05s,transform .15s ease}
.sec7 .hover_wrap .link .arr i{position:absolute;top:50%;left:0;font-size:16px;transition:all ease .2s;transform:translateY(-50%) rotate(20deg);width:20px;height:21px;opacity:0;background:url(/front/images/main/sec6_logo_w.png) center / contain no-repeat}

@keyframes fadeIn {
    from {opacity:0}
    to {opacity:1}
}
@media screen and (min-width:1024.1px) {
    .sec7 .sec_tit2 {flex-shrink:1; width:auto; align-self:flex-end}
}/*lg*/
@media screen and (min-width:1024.1px) and (hover:hover) {
    .sec7 .hover_wrap:hover {cursor:pointer}
    .sec7 .hover_wrap:hover::before {transform:translate(50%,-50%) scale(1.03)}
    .sec7 .hover_wrap:hover .link {padding-right:34px}
    .sec7 .hover_wrap:hover .link .arr {width:16px}
    .sec7 .hover_wrap:hover .link .arr i {left:8px; transform:translateY(-50%) rotate(0); opacity:1}
}/* hover */
@media screen and (max-width:1024px) {
    .sec7 {height:auto}
    .sec7 .inner {flex-direction:column; justify-content:flex-start; align-items:flex-start; height:auto; padding:40px 0; gap:1.24rem}
    .sec7 .sec_tit1 {font-size:1.85rem; line-height:2.76rem}
    .sec7 .sec_tit2 {font-size:1.08rem; line-height:1.54rem; font-weight:400; text-align:left}
    .sec7 .hover_wrap {height:auto; padding:4.125rem 0}
    .sec7 .hover_wrap .text_box {flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:1.24rem; display:flex}
    .sec7 .hover_wrap p {font-size:1.85rem; line-height:2.76rem}
    .sec7 .hover_wrap .link {font-size:1.24rem; line-height:2.15rem; font-weight:400; padding-bottom:0; padding-right:20px; margin-top:1rem}
    .sec7 .hover_wrap .link .arr {width:16px}
    .sec7 .hover_wrap .link .arr i {width:12px; height:13px; left:4px; transform:translateY(-50%) rotate(0); opacity:1}
}/*sm*/
/* --------------------------------//sec7------------------------------ */