@charset "utf-8";

/* sv_hover */
.sv_hover{display: block; /* 메인페이지에서만 diplay: block; */ position: fixed; top: 0; left: 0; width : 450px; height: 450px; overflow: hidden; opacity: 0; transition: opacity 0.5s, transform 0.1s;}
.sv_hover.hide{display: none !important;}
.sv_hover.in{opacity: 1;}

.sv_hover > ul{position: relative; width: 100%; height: 100%; transform: scaleY(0); transition: transform 0.5s; background-position: center; background-size: cover;}
.sv_hover.in > ul{transform: scaleY(1);}

.sv_hover > ul > li{position: absolute; top: 100%; left: 0; width: 100%; height: 100%; transform: scale(1.5); transform-origin: top center; transition: 2.0s ease-out;}

.sv_hover > ul > li.in {top: 0; transition: 1.0s;}
.sv_hover > ul > li.out{top: 100%; transition: 0s;}

.sv_hover.no1 > ul > li:nth-child(1){transform: scale(1.0);}
.sv_hover.no2 > ul > li:nth-child(2){transform: scale(1.0);}
.sv_hover.no3 > ul > li:nth-child(3){transform: scale(1.0);}
.sv_hover.no4 > ul > li:nth-child(4){transform: scale(1.0);}
.sv_hover.no5 > ul > li:nth-child(5){transform: scale(1.0);}

.sv_hover > ul > li img{width: 100%; height: 100%; object-fit: cover;}
@media (max-width: 1280px){
    .sv_hover{width: 340px; height: 340px;}
}
@media (max-width: 1024px){
    .sv_hover{width: 280px; height: 280px;}
}
@media (max-width: 860px){
    .sv_hover{display: none;}
}
@keyframes sv_cover_fx{
    0%   {top: 100%;}
    100%{top: 0%;}
}


/* 메인 공통 */
.main-container{position: relative;}

.sec .main_text{position: relative; box-sizing: border-box; max-width: 92%; margin: 0 auto; font-size: 4.375rem; font-weight: 700; line-height: 1.2; color: var(--black000); user-select: none; padding: 24vh 0 0;}
.sec .main_text .slogan{letter-spacing: -0.035em;}
.sec .main_text .slogan .static{}
.sec .main_text .slogan .static span{color: #1c69ff;}
.sec .main_text .slogan .static .lc{display: none;}

.sec .main_text .eng{display: none; position: absolute; bottom: 3px; left: 49.8%; color: var(--point-color); font-size: 52px; font-weight: 400; font-family: adobe-handwriting-ernie, sans-serif; letter-spacing: -2px;}

.sec .main_text .handwriting{position: absolute; bottom: -28px; left: 40%; width: 384px; font-size: 0;}
.sec .main_text .handwriting .hw{fill: none; stroke: var(--point-color); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round;}
.sec .main_text .handwriting .hand1 {stroke-dasharray: 157; stroke-dashoffset: 157; animation: handwriting1 0.25s linear 0.5s forwards;}
.sec .main_text .handwriting .hand2 {stroke-dasharray: 353; stroke-dashoffset: 353; animation: handwriting2 0.5s linear 0.75s forwards;}
.sec .main_text .handwriting .hand3 {stroke-dasharray: 43; stroke-dashoffset: 43;   animation: handwriting3 0.1s linear 1.25s forwards;}
.sec .main_text .handwriting .hand4 {stroke-dasharray: 8; stroke-dashoffset: 8;     animation: handwriting4 0.3s linear 1.35s forwards;}
.sec .main_text .handwriting .hand5 {stroke-dasharray: 105; stroke-dashoffset: 105; animation: handwriting5 0.2s linear 1.65s forwards;}
.sec .main_text .handwriting .hand6 {stroke-dasharray: 742; stroke-dashoffset: 742; animation: handwriting6 1.1s linear 1.85s forwards;}
.sec .main_text .handwriting .hand7 {stroke-dasharray: 6; stroke-dashoffset: 6;     animation: handwriting7 0.1s linear 2.95s forwards;}
.sec .main_text .handwriting .hand8 {stroke-dasharray: 680; stroke-dashoffset: 680; animation: handwriting8 0.5s linear 3.05s forwards;}
.sec .main_text .handwriting .hand9 {stroke-dasharray: 120; stroke-dashoffset: 120; animation: handwriting9 0.25s linear 3.55s forwards;}
.sec .main_text .handwriting .hand10{stroke-dasharray: 85; stroke-dashoffset: 85;   animation: handwriting10 0.1s linear 3.8s forwards;}
@media (max-width: 1280px){
    .sec .main_text{max-width: 93%; font-size: clamp(25px,5.1vw,70px);}
	.sec .main_text .handwriting{left: 60%; bottom: -7%; width: 27vw;}
}
@media (max-width: 1024px){
    .sec .main_text .handwriting{left: 55%; width: 30vw;}
}
@media (max-width: 860px){
    .sec .main_text{font-size: clamp(25px,5.1vw,45px);}
    .sec .main_text .handwriting{width: 33vw;}
}
@media (max-width: 640px){
    .sec .main_text{line-height: 130%; font-size: clamp(25px,7vw,52px);}
    .sec .main_text .handwriting{left: 40%; bottom: -15.5%; height: auto; width: 47vw;}
}
@media (max-width: 460px){
    .sec .main_text{font-size: clamp(25px,6.5vw,52px); padding: 15vh 0 0;}
    .sec .main_text .handwriting{left: 39%; bottom: -16%; width: 170px;}
}


/* sec1 */
:root{--mqimg_height: 160px;}
.sec1{position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; min-width: 320px; vertical-align: middle;}
.sec1 .main_text .slogan .static .lc3{display: block;}

.mq_wrap{position: absolute; top: calc(100% - 140px);}
.mq_wrap .mq > div{display: flex; overflow: hidden; will-change: transform;}
.mq_wrap .mq > div > div{float: left; line-height: 0;}
.mq_wrap .mq > div > div img{max-width: none; width: auto; height: var(--mqimg_height); padding-right: 80px;}
.mq_wrap .mq2{margin-top: 2.5rem;}
.mq_wrap .mq2 > div > div img{height: calc( var(--mqimg_height) + 1px );}

.scrHint{position: absolute; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center;}
.scrHint .mouse{position: relative; width: 25px; height: 46px; box-shadow: inset 0 0 0 1px var(--black000); border-radius: 25px;}
.scrHint .mouse .wheel{position: absolute; top: 9px; left: 50%; transform: translateX(-50%) translateY(0); width: 5.5px; height: 5.5px; border-radius: 50%; background-color: var(--black000); animation: wheel 1.25s infinite;}
.scrHint .arrows .arr{transform: rotate(-45deg); width: 10px; height: 10px; border-left: 1px solid var(--black000); border-bottom: 1px solid var(--black000); animation: arrowBlink 1.25s infinite;}
.scrHint .arrows .arr1{animation-delay: 0s;}
.scrHint .arrows .arr2{animation-delay: 0.1s;}
.scrHint .arrows .arr3{animation-delay: 0.2s;}
.scrHint .arrows .arr:not(:first-child){margin-top: 0.5px;}
@media (max-width: 1280px){
    :root{--mqimg_height: 9.5vw;}

    .mq_wrap{top: calc(100% - var(--mqimg_height));}
    .mq_wrap .mq2{margin-top: 15px;}
    .mq_wrap .mq > div > div img{padding-right: 6vw;}
}
@media (max-width: 640px){
    .sec1 .main_text .slogan .static .lc1 {display: block;}
    .sec1 .main_text .slogan .static .lc2 {}
    .sec1 .main_text .slogan .static .lc4 {}

    .scrHint .mouse{width: 20px; height: 34px;}
    .scrHint .arrows .arr{width: 7px; height: 7px;}
    .scrHint .arrows .arr:not(:first-child){margin-top: 0;}
    .scrHint .arrows .arr:first-child{margin-top: 2px;}
}


/* sec2 */
.sec2{position: relative; z-index: 2; padding-top: 560px;}

.pf_list{width: 92%; margin: 0 auto;}
.pf_list ul{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(200px, auto)); grid-row-gap: 4.09vw; grid-column-gap: 2.09vw;}
.pf_list ul li{box-sizing: border-box; position: relative;}

.pf_list ul li > a{position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px,1.5vw,21px); overflow: hidden; transition: 0.3s !important;}
.pf_list ul li > a .thumb{position: relative; /* flex: 1; */ overflow: hidden; aspect-ratio: 560 / 390;}
.pf_list ul li > a .thumb img{width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
.pf_list ul li > a:hover > .thumb img,
.pf_list ul li > a:focus > .thumb img{transform: scale(1.005); filter: blur(2px) brightness(0.85);}

.pf_list ul li > a .thumb iframe{position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1); transition: 0.3s !important;}
.pf_list ul li > a:hover > .thumb iframe,
.pf_list ul li > a:focus > .thumb iframe{transform: translate(-50%, -50%) scale(1.005); filter: blur(2px) brightness(0.85);}

.pf_list ul li > a .thumb.hasVideo{height: auto; padding: 65% 0 0; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.pf_list ul li > a .thumb.hasVideo .yt_wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: none; margin: auto;}
.pf_list ul li > a .thumb.hasVideo .yt_wrap .yt_box{width: 100%; height: 100%; position: relative;}

.pf_list ul li > a .info{margin-top: auto; color: var(--black000);}
.pf_list ul li > a .info dl{display: flex; flex-direction: column-reverse; gap: 4px; line-height: 1.2; font-size: 1.25rem; font-weight: 600;}
.pf_list ul li > a .info dl dt{}
.pf_list ul li > a .info dl dd{color: var(--gray); font-size: 13px;}
.pf_list ul li > a .info dl dd div{text-transform: uppercase;}
@media (max-width: 1600px){

}
@media (max-width: 1540px){
    .pf_list ul li > a .thumb.hasVideo{padding: 70% 0 0;}
}
@media (max-width: 1280px){
    .sec2{padding-top: clamp(430px,48%,600px);}
    .pf_list ul{grid-template-columns: repeat(2, 1fr); grid-row-gap: 40px;}
}
@media (max-width: 1024px){

}
@media (max-width: 860px){
    /* .sec2{padding-top: clamp(400px,50%,500px);} */
    .pf_list ul{grid-template-columns: repeat(1, 1fr);}
}
@media (max-width: 768px){

}
@media (max-width: 640px){
    .sec2{padding-top: 50vh;}
}
@media (max-width: 460px){
    .sec2{padding-top: 35vh;}
}


/* sec3 */
.sec3{position: relative; z-index: 3; /* padding: 20.3vw 0 0; */ /* padding: 10vh 0 0; */ padding: 20rem 0 20.25rem; overflow: hidden !important;}
.sec3 .tit{width: 92%; margin: 0 auto; font-size: 3.125rem; font-weight: 700; line-height: 1.2; margin-bottom: 3.125rem;}
.sec3 .tit span{color: #1c69ff;}

.pf_list2{position: relative; margin: 0 auto 20.25rem;}
.pf_list2_1{margin: 0 auto 10rem;}
.pf_list2 .list{margin-left: 4%;}
.pf_list2 .list .slick-list{box-sizing: border-box; padding: 0 26.25% 0 0;}
.pf_list2 .item{float: left; width: 33.333%; margin-right: 40px;}
.pf_list2 .item a{width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;}
.pf_list2 .item .thumb{flex: 1; aspect-ratio: 485 / 388; overflow: hidden;}
.pf_list2 .item .thumb img{width: 100%; height: 100%; object-fit: cover;}
.pf_list2 .item a:hover > .thumb img,
.pf_list2 .item a:focus > .thumb img{transform: scale(1.005); filter: blur(2px) brightness(0.85);}
.pf_list2 .item .info{margin-top: auto; color: var(--black000);}
.pf_list2 .item .info dl{display: flex; justify-content: space-between; line-height: 1.2; font-size: 1.25rem;}
.pf_list2 .item .info dl dt{font-weight: 600;}
.pf_list2 .item .info dl dd{font-weight: 300; color: var(--cod-gray);}
.pf_list2 .item .info dl dd div{text-transform: uppercase;}

.pf_list2 .state{width: 92%; margin: 2.5rem auto 0; text-align: center;}
.pf_list2 .state .progress{position: relative; display: block; width: 100%; height: 1px; margin: 0 auto 0; background-color: #d9d9d9;}
.pf_list2 .state .progress .bar{position: absolute; top: 0; left: 0; /*width: js;*/ height: 100%; background: #111}

.pf_list2 .slick-dots{position: absolute; bottom: -51px; left: 0; right: 4%; display: flex; opacity: 0;}
.pf_list2 .slick-dots > li{flex: 1;}
.pf_list2 .slick-dots > li button{background: none; border: 1px solid #000; display: block; width: 100%;}



.pf_list3{width: 92%; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: 40.33% 1fr 1fr; grid-template-rows: repeat(auto-fill, minmax(150px, auto)); grid-row-gap: 40px; grid-column-gap: 40px;}
.pf_list3 .item:nth-child(1){grid-column: 1 / 2; grid-row: 1 / 3;}
.pf_list3 .item a{width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 13px;}
.pf_list3 .item .thumb{flex: 1; aspect-ratio: 485 / 388; overflow: hidden;}
.pf_list3 .item .thumb img{width: 100%; height: 100%; object-fit: cover;}
.pf_list3 .item a:hover > .thumb img,
.pf_list3 .item a:focus > .thumb img{transform: scale(1.005); filter: blur(2px) brightness(0.85);}
.pf_list3 .item .info{margin-top: auto; color: var(--black000);}
.pf_list3 .item .info dl{display: flex; justify-content: space-between; line-height: 1.2; font-size: 1.25rem;}
.pf_list3 .item .info dl dt{font-weight: 600;}
.pf_list3 .item .info dl dd{font-weight: 300; color: var(--cod-gray);}
.pf_list3 .item .info dl dd div{text-transform: uppercase;}
@media (max-width: 1600px){
    .sec3{padding: 18vw 0 0; margin-bottom: 20vw;}
    .pf_list2{margin: 0 auto 20vw;}
}
@media (max-width: 1280px){
    .sec3 .tit{font-size: 4vw; margin-bottom: 3vw;}
    .pf_list2 .list .slick-list{padding: 0 15% 0 0;}
    .pf_list2 .item{margin-right: 30px;}

    .pf_list3{grid-row-gap: 30px; grid-column-gap: 30px;}
}
@media (max-width: 1024px){
    .sec3{/* padding: 60vh 0 0; */}

    .pf_list3{grid-template-columns: repeat(2, 1fr);}
    .pf_list3 .item:nth-child(1){grid-column: 1 /  -1; grid-row: initial;}
}
@media (max-width: 860px){
    .sec3 .tit{font-size: clamp(30px,5vw,42px);}
    .pf_list2 .list .slick-list{padding: 0 5% 0 0;}
    .pf_list2 .item{margin-right: 20px;}

    .pf_list3{grid-row-gap: 20px; grid-column-gap: 20px;}
}
@media (max-width: 640px){
    .pf_list2{margin: 0 auto 5rem;}

    .pf_list3{grid-template-columns: repeat(1, 1fr);}
}
@media (max-width: 490px){
    .sec3 .tit br{display: none;}
}
@media (max-width: 460px){
    .sec3 .tit{font-size: 6.6vw; margin-bottom: 20px;}
    .sec3 .tit br{display: none;}
    .pf_list2 .list .slick-list{padding: 0 30% 0 0;}
}


/* sec4 */
.sec4{position: relative; z-index: 4; padding: 19.9rem 0 9.38rem;}

.sv_wrap{position: relative;}
.sv_list{max-width: 92%; margin: 0 auto; border-top: 1px solid var(--black000); border-bottom: 1px solid var(--black000); color: var(--black000);}
.sv_list > li + li{border-top: 1px solid #a5a5a5;}
.sv_list > li > a{display: block; padding: 54px 0 49px; transition: 0.2s;}
.sv_list > li > a:hover{padding-left: 50px;}
.sv_list .con{position: relative; max-width: 588px;}
.sv_list .con h4{font-family: 'ProximaNova'; font-size: 70px; font-weight: 700; line-height: 1; letter-spacing: -0.01em;}
.sv_list .con .txt{font-size: 16px; line-height: 1.2;}
.sv_list .con .txt .tit{font-size: 1.25em; font-weight: 600; padding: 23px 0 10px;}
.sv_list .con .txt .des{font-weight: 300;}
.sv_list .con .arr{position: absolute; top: 50%; left: 100%; transform: translate(-150%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; background-color: #1c69ff; opacity: 0; visibility: hidden;}
.sv_list .con .arr:before{content: ""; display: inline-block; margin: 0 0 0 -10px; width: 30px; height: 30px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.sv_list > li > a:hover .con .arr{opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: 0.5s ease-out;}
@media (max-width: 1600px){
    .sec4{padding: 20vw 0 9.38rem;}

    .sv_list > li > a{padding: 4.3vw 0;}
    .sv_list > li > a:hover{padding-left: 2.5vw;}
    .sv_list .con{max-width: 48%;}
    .sv_list .con h4{font-size: 4.3vw;}
}
@media (max-width: 1280px){
    .sv_list .con .arr{width: 7.5vw; height: 7.5vw;}
    .sv_list .con .arr:before{width: 2vw; height: 2vw;}
}
@media (max-width: 1024px){

}
@media (max-width: 860px){
    .sv_list .con{max-width: none;}
    .sv_list .con h4{font-size: 5.3vw;}
    .sv_list .con .txt{font-size: 15px;}
    .sv_list .con .txt .tit{padding: 18px 0 9px;}
    .sv_list .con .arr{transform: translate(-200%, -50%);}
    .sv_list > li > a:hover .con .arr{transform: translate(-100%, -50%);}
}
@media (max-width: 640px){
    .sec4{padding: 5rem 0 32vw;}

    .sv_list .con .txt{font-size: 14px;}
    .sv_list .con .txt .tit{font-size: 1.1em; padding: 10px 0 10px;}
    .sv_list .con .arr{display: none;}
}
@media (max-width: 460px){
    .sv_list .con h4{font-size: 20px;}
}


/* sec5 */
.sec5{position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; perspective: 1000px;}
.sec5 .sec5_bg{position: absolute; top: 0; left: 50%; transform-origin: top center; transform: translateX(-50%) scale(0.35) rotateX(100deg); opacity: 0; width: 100%; height: 100%; background: url("../img/main/main_sec5_bg.png") no-repeat center; background-size: cover; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.sec5 .sec5_bg .mask{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75);}
html[data-dark=true] .sec5 .sec5_bg .mask{background-color: rgba(0,0,0,0.75);}

.sec5 .main_text_wrap{width: 100%;}
.sec5 .main_text{text-align: center; color: #fff; width: 92%; max-width: 1400px; font-size: 5.75rem; padding: 0;}
.sec5 .main_text.show{padding: 0 0 8.2rem;}
.sec5 .main_text .link_wrap{position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); visibility: hidden; opacity: 0;}
.sec5 .main_text.show .link_wrap{visibility: visible; opacity: 1; transform: translate(-50%, 0%); transition: 0.1s linear; transition-delay: 0.25s; display: flex; gap: 2rem;}
.sec5 .main_text .link_wrap .link{display: block; box-sizing: border-box; border: 1px solid transparent; border-radius: 64px; width: 16.625rem; line-height: 3.875rem; font-size: 1.5rem; font-weight: 700; text-align: center; background-color: #fff; color: #111;}
.sec5 .main_text .link_wrap .link.clear{background-color: transparent; border-color: #fff; color: #fff;}
.sec5 .main_text .link_wrap .link:hover{background-position: 0 0, 0 0; transition-duration: 0.3s;}

.flip_wrap{position: relative; display: flex; gap: 2.6rem; /*max-width: 90%;*/ margin: 0 auto; text-align: left;}
.flip_wrap .flip{position: relative; width: 0; overflow: hidden;}
.flip_wrap .flip .line{position: absolute; bottom: 0; left: 0; width: 100%; height: 0.5rem; background-color: #fff;}
.flip_wrap .flip .list > li{position: absolute; top: 0; left: 0; right: 0; opacity: 0; text-align: center; font-size: 0.869em;}
.flip_wrap .flip .list.step1 li:not(:nth-child(1)){opacity: 0;}
.flip_wrap .flip .list.step1 li:nth-child(1){opacity: 1;}
.flip_wrap .flip .list.step2 li:not(:nth-child(2)){opacity: 0;}
.flip_wrap .flip .list.step2 li:nth-child(2){opacity: 1;}
.flip_wrap .flip .list.step3 li:not(:nth-child(3)){opacity: 0;}
.flip_wrap .flip .list.step3 li:nth-child(3){opacity: 1;}
.flip_wrap .flip .list.step4 li:not(:nth-child(4)){opacity: 0;}
.flip_wrap .flip .list.step4 li:nth-child(4){opacity: 1;}
.flip_wrap .flip .list.step5 li:not(:nth-child(5)){opacity: 0;}
.flip_wrap .flip .list.step5 li:nth-child(5){opacity: 1;}
.flip_wrap .flip .list.step6 li:not(:nth-child(6)){opacity: 0;}
.flip_wrap .flip .list.step6 li:nth-child(6){opacity: 1;}
.flip_wrap .flip .list.step7 li:not(:nth-child(7)){opacity: 0;}
.flip_wrap .flip .list.step7 li:nth-child(7){opacity: 1;}
.flip_wrap .flip .list.step8 li:not(:nth-child(8)){opacity: 0;}
.flip_wrap .flip .list.step8 li:nth-child(8){opacity: 1;}
.flip_wrap .flip .list.step9 li:not(:nth-child(9)){opacity: 0;}
.flip_wrap .flip .list.step9 li:nth-child(9){opacity: 1;}
.flip_wrap .flip .list.step10 li:not(:nth-child(10)){opacity: 0;}
.flip_wrap .flip .list.step10 li:nth-child(10){opacity: 1;}

.flip_wrap .txt{position: relative;}
@media (max-width: 1600px){
    .sec5 .main_text{font-size: 5.35vw;}

    .sec5 .main_text{max-width: none; width: 84%;}
    .flip_wrap{gap: 2.2vw;}
    .flip_wrap .flip .line{height: 0.4vw;}
}
@media (max-width: 1280px){
    .sec5 .main_text{width: 89%; max-width: 93%; font-size: 6vw;}
}
@media (max-width: 860px){
    .sec5 .main_text{width: 86%; font-size: 7vw;}
    .sec5 .main_text.show .link_wrap{gap: 1rem;}
    .sec5 .main_text .link_wrap .link{font-size: 1.3rem; line-height: 48px; width: 200px;}
    .flip_wrap{flex-direction: column; align-items: center; gap: 5vw;}
    .flip_wrap .flip{height: 10.5vw;}
    .flip_wrap .flip .list > li{font-size: 1em;}
    .flip_wrap .flip .line{height: 3px;}
}
@media (max-width: 640px){
    .sec5 .main_text{width: 86%; font-size: 7.4vw; line-height: 130%;}
    .sec5 .main_text.show .link_wrap{gap: 1rem;}
    .sec5 .main_text .link_wrap .link{font-size: 16px; line-height: 42px; width: 160px;}
    .flip_wrap .flip{height: 12vw;}
    .flip_wrap .flip .line{height: 2px;}
}
@media (max-width: 430px){
    .sec5 .main_text{font-size: 8vw;}
    .sec5 .main_text.show{padding: 0 0 6rem;}
    .flip_wrap .flip{height: 12vw;}
    .flip_wrap .flip .line{height: 2px;}
}






.sec4 {background: var(--sec-bg); padding: 0 0 20.25rem 0;}
.sec4 .wrap {display: flex; align-items: center; gap: 60px; overflow: visible; width: 92%;}
.sec4 .wrap::after {content: none;}
.sec4 .item {width: calc((100% - 350px) / 2); }
.sec4 .item a {display: flex; flex-direction: column; gap: 24px;}
.sec4 .item h1 {font-size: 150px; letter-spacing: -2px; line-height: 53%; color: #fff;}
.sec4 .item h1 span {color: var(--sec-p);}
.sec4 .item .tit {font-size: 40px; letter-spacing: -2px; line-height: 130%;}
.sec4 .item .desc {font-size: 25px; font-weight: 600; display: flex; align-items: center; gap: 5px;}
.sec4 .item .desc .plus {position: relative; width: 35px; height: 35px;}
.sec4 .item .desc .plus::before,
.sec4 .item .desc .plus::after {content: ''; display: block; width: 12px; height: 3px; background: #1C69FF; border-radius: 3px; position: absolute;}
.sec4 .item .desc .plus::before {top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sec4 .item .desc .plus::after {top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);;}

.sec4 .item.item01 .tit {margin: 60px 0 0 0;}
.sec4 .item.item01:hover {}

.sec4 .item.item02 a {text-align: right; align-items: flex-end;}
.sec4 .item.item02 h1 {order: 3;}
.sec4 .item.item02 .tit {order: 2; margin: 0 0 60px 0;}
.sec4 .item.item02 .desc {order: 1;}
.sec4 .item.item02:hover {}

.sec4 .line {position: relative; display: flex; gap: 10px; width: 230px; height: 20px; border-radius: 50px; background: var(--black);}


@media screen and (max-width: 1680px){
.sec4 .wrap {gap: 40px;}
.sec4 .item {width:calc((100% - 280px) / 2);}
.sec4 .item h1 {font-size: 100px;}
.sec4 .item .tit {font-size: 30px; line-height: 120%;}
.sec4 .item.item01 .tit {margin: 30px 0 0 0;}
.sec4 .item.item02 .tit {margin: 0 0 30px 0;}
.sec4 .line {width: 200px; height: 10px;}

}
@media screen and (max-width: 1600px) {
    .sec4 { padding: 0; margin-bottom: 20vw;}
}
@media screen and (max-width: 1280px){
    .sec4 .item {width:calc((100% - 230px) / 2);}
    .sec4 .item a {gap: 18px;}
    .sec4 .item h1 {font-size: 80px;}
    .sec4 .item .tit {font-size: 22px;}
    .sec4 .item .desc {font-size: 18px;}
    .sec4 .line {width: 150px;}
}
@media screen and (max-width: 1080px){

}
@media screen and (max-width: 860px){
    .sec4 .wrap {flex-direction: column;}
    .sec4 .item {width: 100%;}
    .sec4 .item a {row-gap: 10px; column-gap: 15px; flex-direction: row; flex-wrap: wrap; align-items: flex-end;}
    .sec4 .item h1 {font-size: 50px;}
    .sec4 .item .tit {font-size: 18px;}
    .sec4 .item .desc {width: 100%; font-size: 1.1rem;}
    .sec4 .item.item01 .tit {margin: 0}

    .sec4 .item.item02 a {justify-content: flex-end;}
    .sec4 .item.item02 h1 {order: 2;}
    .sec4 .item.item02 .tit {order: 1; margin: 0;}
    .sec4 .item.item02 .desc {order: 3; justify-content: flex-end; }

    .sec4 .line {height: 5px;}
}
@media screen and (max-width: 568px){
    .sec4 .item .tit {font-size: 1rem;}
    .sec4 .item .desc {font-size: 1rem;}
    .sec4 .line {width: 100px;}
}
@media screen and (max-width: 425px){

}


















/* 터치 디바이스일 경우 */
@media (hover: none) {
    /* 마우스오버 흐림 효과 없애기 */
    .pf_list ul li > a:hover > .thumb img,
    .pf_list ul li > a:focus > .thumb img{transform: scale(1); filter: initial;}
    .pf_list ul li > a:hover > .thumb iframe,
    .pf_list ul li > a:focus > .thumb iframe{transform: translate(-50%, -50%) scale(11); filter: initial;}
    .pf_list2 .item a:hover > .thumb img,
    .pf_list2 .item a:focus > .thumb img{transform: scale(1); filter: initial;}
    .pf_list3 .item a:hover > .thumb img,
    .pf_list3 .item a:focus > .thumb img{transform: scale(1); filter: initial;}
}



/* css animation */
@keyframes marquee1{ 0%{transform: translate(0);} to{transform: translate(-100%);} }
@keyframes marquee2{ 0%{transform: translate(100%);} to{transform: translate(0);} }
@keyframes wheel{
    0%{transform: translateX(-50%) translateY(0); opacity: 1;}
    80%{transform: translateX(-50%) translateY(9px); opacity: 0.9;}
    100%{transform: translateX(-50%) translateY(9px); opacity: 0;}
}
@keyframes arrowBlink{
    0%{opacity: 0.25;}
    20%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes blink1 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes blink2 {
    0%{
        /*opacity: 0.3;*/
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes blink1_dark {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes blink2_dark {
    0%{
        /*opacity: 0.3;*/
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes blink2_hover {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes roll1 {
    0%{
        margin-left: 0.05em;
        transform: rotate(0deg);
    }
    100%{
        margin-left: 0.5em;
        transform: rotate(180deg);
    }
}
@keyframes heartbeat {
    0%{
        transform: scale(0.6);
    }
    50%{
        transform: scale(1.1);
    }
    70%{
        transform: scale(0.8);
    }
    100%{
        transform: scale(1.2);
    }
}
@keyframes slideDown1 {
    0%{
        top: -70%;
    }
    100%{
        top: 20%;
    }
}
@keyframes slideDown2 {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(90%);
    }
}
@keyframes slideDown1_dark {
    0%{
        top: -70%;
    }
    100%{
        top: 20%;
    }
}
@keyframes slideDown2_dark {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(90%);
    }
}
@keyframes move1 {
    0%{
        transform: translateX(0);
    }

    50%{
        transform: translateX(-8px);
    }


    100%{
        transform: translateX(0);
    }
}
@keyframes move2 {
    0%{
        transform: translateX(0);
    }

    50%{
        transform: translateX(-16px);
    }


    100%{
        transform: translateX(0);
    }
}
@keyframes boxmove1 {
    25%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(110%);
        opacity: 0;
    }
}
@keyframes boxmove2 {
    25%{
        transform: translate(0,0);
        opacity: 1;
    }
    100%{
        transform: translate(110%,-110%);
        opacity: 0;
    }
}
@keyframes boxmove3 {
    25%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(-110%);
        opacity: 0;
    }
}
@keyframes fx_fade{
    from{opacity: 0; }
    to{opacity: 1; }
}
@keyframes o_to_box{
    0%   {border-radius: 50%; border-width: 0.125em; width: 0.27em; height: 0.25em; transform: scale(1, 1) translateX(-50%);   }
    50%  {border-radius: 50%; border-width: 0.125em; width: 0.27em; height: 0.48em; transform: scale(1, 1) translateX(-50%);   }
    100% {border-radius: 3px; border-width: 0.125em; width: 0.27em; height: 1.00em;  transform: scale(0.8, 0.5) translateX(-50%); }
}
@keyframes handwriting1 {from {stroke-dashoffset : 157px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2 {from {stroke-dashoffset : 353px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting3 {from {stroke-dashoffset : 43px;}  to {stroke-dashoffset : 0;}}
@keyframes handwriting4 {from {stroke-dashoffset : 8px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting5 {from {stroke-dashoffset : 105px;}  to {stroke-dashoffset : 0;}}
@keyframes handwriting6 {from {stroke-dashoffset : 742px;}  to {stroke-dashoffset : 0;}}
@keyframes handwriting7 {from {stroke-dashoffset : 6px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting8 {from {stroke-dashoffset : 620px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting9 {from {stroke-dashoffset : 120px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting10{from {stroke-dashoffset : 85px;}  to {stroke-dashoffset : 0;}}

@keyframes handwriting2_1 {from {stroke-dashoffset : 706px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2_2 {from {stroke-dashoffset : 5px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2_3 {from {stroke-dashoffset : 6px;}  to {stroke-dashoffset : 0;}}
@keyframes handwriting2_4 {from {stroke-dashoffset : 31px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2_5 {from {stroke-dashoffset : 97px;}  to {stroke-dashoffset : 0;}}
@keyframes handwriting2_6 {from {stroke-dashoffset : 63px;}  to {stroke-dashoffset : 0;}}
@keyframes handwriting2_7 {from {stroke-dashoffset : 153px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2_8 {from {stroke-dashoffset : 443px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2_9 {from {stroke-dashoffset : 5px;} to {stroke-dashoffset : 0;}}
@keyframes handwriting2_10{from {stroke-dashoffset : 85px;}  to {stroke-dashoffset : 0;}}

@keyframes elasticus {
    0%    {transform-origin: 0% 0%; transform: scale(1, 0);}
    50%   {transform-origin: 0% 0%; transform: scale(1, 1);}
    50.1% {transform-origin: 0% 100%; transform: scale(1, 1);}
    100%  {transform-origin: 0% 100%; transform: scale(1, 0);}
}
@keyframes elasticus2 {
    0%    {transform: translate(-50%,-100px); opacity: 0;}
    50%   {transform: translate(-50%,0); opacity: 1;}
    50.1% {transform: translate(-50%,0); opacity: 1;}
    100%  {transform: translate(-50%,-50px); opacity: 0;}
}
@media (max-width: 568px){
    @keyframes elasticus2 {
        0%    {transform: translate(-50%,-50px); opacity: 0;}
        50%   {transform: translate(-50%,0); opacity: 1;}
        50.1% {transform: translate(-50%,0); opacity: 1;}
        100%  {transform: translate(-50%,-25px); opacity: 0;}
    }
}