/* common */
/* about us btn */
.about-btn{display:flex; align-items: center; justify-content: center; gap:10px; width: 100%; max-width: 160px; height: 50px; border:1px solid var(--color-point02); border-radius:2px; color: var(--color-point02); font-family: "Barlow", sans-serif; font-weight: 600; font-size: var(--font22); transition: 0.3s;}
.about-btn svg path,
.about-btn svg{transition: 0.3s;}
/* view more btn */
.view-btn{display:flex; align-items: center; justify-content: center; gap:10px; width: 100%; max-width: 170px; height: 50px; border:1px solid #fff; border-radius:2px; color: #fff; font-family: "Barlow", sans-serif; font-weight: 600; font-size: var(--font22); transition: 0.3s;}
.view-btn svg path,
.view-btn svg{transition: 0.3s;}
/* Read More btn */
.read-btn{display:flex; align-items: center; justify-content: center; gap:10px; width: 100%; max-width: 160px; height: 50px; border-radius:2px; color: var(--color-point01); font-family: "Barlow", sans-serif; font-weight: 600; font-size: var(--font20); transition: 0.3s;}
.read-btn svg path,
.read-btn svg{transition: 0.3s;}

@media (hover: hover){
    /* about us btn */
    .about-btn:hover svg{transform: translateX(5px);}
    .about-btn:hover svg path{stroke: #000;}
    .about-btn:hover{background-color: var(--color-point02); color: #000;}
    /* view more btn */
    .view-btn:hover svg{transform: translateX(5px);}
    .view-btn:hover svg path{stroke: #000;}
    .view-btn:hover{background-color: #fff; color: #000;}
    /* Read More btn */
    .read-btn:hover svg{transform: translateX(5px);}
    .read-btn:hover svg path{stroke: #fff;}
    .read-btn:hover{background-color: var(--color-point01); color: #fff;}
}


.slide-btn > div{position: absolute; top: 50%; display:flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #111; border-radius:2px; overflow: hidden; cursor: pointer; transform: translateY(-50%); z-index: 50;}
.slide-btn > div .view-box{display:flex; align-items: center; width: 20px; height: 20px; overflow: hidden;}
.slide-btn > div .view-box figure{display:flex; align-items: center; width: 100%; height: 100%; transform: translateX(0); transition: 0.6s;}
.slide-btn > .prev{left: 36px;}
.slide-btn > .next{right: 36px;}
.slide-btn > .next .view-box figure{transform: translateX(-20px);}
.slide-btn .prev:hover .view-box figure{transform: translateX(-20px);}
.slide-btn .next:hover .view-box figure{transform: translateX(0);}
.hidden-box{overflow: hidden;}

@media screen and (max-width:1840px) {
    .about-btn,
    .read-btn{width: clamp(140px, 8.7vw, 160px); height: clamp(44px, 2.72vw, 50px);}
    .view-btn{width: clamp(150px, 9.24vw, 170px); height: clamp(44px, 2.72vw, 50px);}
    .about-btn svg,
    .read-btn svg,
    .view-btn svg{width: clamp(15px, 1.09vw, 20px); height: clamp(15px, 1.09vw, 20px);}
}
@media screen and (max-width:768px) {
    .slide-btn > div{width: 40px; height: 40px;}
    .slide-btn > .prev{left: 16px;}
    .slide-btn > .next{right: 16px;}
}

/* mv */
.mv .slide-wrap .item{position: relative; overflow: hidden;}
.mv .slide-wrap .item .video-box{position: relative; height: 100svh;}
.mv .slide-wrap .item .video-box video{position: absolute; top: 50%; left: 50%; min-width: 102%; min-height: 102%; transform: translate(-50%, -50%);}
.mv .slide-wrap .item .tit{position: absolute; top: calc(21.75% + 80px); left: calc((100vw - 1720px) / 2); opacity: 0; transition: 0.8s;}
.mv .slide-wrap .item .tit h2{font-weight: 600; font-size: 100px; color: var(--color-point02);}
.mv .slide-wrap .item .tit p{margin: 40px 0 60px; font-weight: 500; font-size: 22px; color: #fff; line-height: 1.6;}
.mv .slide-wrap .item02 .tit{text-align: right; left: auto; top: auto; right: calc((100vw - 1720px) / 2); bottom: 240px;}
.mv .slide-wrap .item02 .tit a{margin-left: auto;}
.mv .slide-wrap .item.slick_now .tit{top: 21.75%; opacity: 1;}
.mv .slide-wrap .item02.slick_now .tit{top: auto; bottom: 160px; opacity: 1;}

/* sec02 */
.sec02{position: relative; margin: 80px 0;}
.sec02::before{content:""; position: absolute; top: 0; bottom: 0; left: 0; width:88px; background: #fff; z-index: 1;}
.sec02::after{content:""; position: absolute; top: 0; bottom: 0; right: 0; width:88px; background: #fff; z-index: 1;}
.sec02 .slide-wrap{position: relative; width: 100%; padding: 0 100px; margin: 0 auto;}
.sec02 .slide-wrap .slick-list{margin-right: -20px; overflow: visible;}
.sec02 .slide-wrap .item{position: relative; margin-right: 20px;}
.sec02 .slide-wrap .item > a{display: block;}
.sec02 .slide-wrap .item > a > figure{display: flex;align-items: center; justify-content: center; height: 120px; border:1px solid #ddd; border-radius:10px;}
.sec02 .slide-wrap .item > a > figure img{max-width: 220px; max-height: 90px; object-fit: contain;}
.sec02 .slide-wrap .item .txt{position: absolute; bottom: 0; left: 0; display:flex; flex-direction: column; justify-content: space-between; width: 100%; height: 0; aspect-ratio: 328 / 476; background-color: var(--color-point01); padding: 0 30px; border-radius:10px; overflow: hidden; transition: 0.6s;}
.sec02 .slide-wrap .item:hover .txt{height: 476px;}
.sec02 .slide-wrap .item .txt figure{display:flex; align-items: center; height: 90px; margin-top: 30px; flex-shrink: 0}
.sec02 .slide-wrap .item .txt figure img{margin: 0 auto; max-width: 220px; max-height: 90px; object-fit: contain;}
.sec02 .slide-wrap .item .txt p{font-weight: 400; font-size: var(--font20); line-height: 1.5; margin: 6px 0 70px; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; height: 9em; color: #fff; flex-shrink: 0}
.sec02 .slide-wrap .item .txt a.view-btn{margin: 0 auto 50px; flex-shrink: 0}


/* sec03 */
.sec03{background-color: #F8F8F8; padding: 150px 0 168px; overflow: hidden;}
.sec03 .flex-box{display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px;}
.sec03 h2{font-weight: 600; font-size: var(--font80);}
.sec03 .about-btn{max-width: 230px; border-color: #000; color: #000;}
.sec03 .about-btn:hover{ background: var(--color-point01) ;border: var(--color-point01); color: #FFF;}
.sec03 .about-btn:hover svg path{ stroke: #FFF; }
.sec03 .slide-wrap .slick-list{margin-right: -60px;}
.sec03 .slide-wrap .slick-list .slick-track{padding-top: 20px; margin-left: 0;}
.sec03 .slide-wrap .item{margin-right: 60px; transition: 0.3s; border:2px solid transparent;border-radius:7px; overflow: hidden;}
.sec03 .slide-wrap .item a{ display: block; }
.sec03 .slide-wrap .item a figure{position: relative; padding-bottom: 68%;}
.sec03 .slide-wrap .item a figure img{object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec03 .slide-wrap .item a .txt{padding: 30px; background: #fff;}
.sec03 .slide-wrap .item a .txt .date{font-weight: 600; font-size: var(--font20); color: #999;}
.sec03 .slide-wrap .item a .txt p{margin-top: 22px; font-weight: 600; font-size: var(--font24); line-height: 1.5; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; height: 3em}
.sec03 .slide-wrap .item a .txt .read-btn{opacity: 0; visibility: hidden; margin-left: auto; margin-top: 22px; transition: 0.3s;}
.sec03 .slide-ui{display:flex; gap:0 80px; align-items: center; margin-top: 46px;}
.sec03 .slide-ui .prev,
.sec03 .slide-ui .next{position: static; transform: translate(0);}
.sec03 .slide-ui .slide-btn,
.sec03 .slide-ui .slide-btn .slide-paging{display:flex; gap:0 20px; align-items: center;}
.sec03 .slide-ui .slide-btn .slide-paging p{font-weight: 600; font-size: var(--font20); color: #111;}
.sec03 .slide-ui .slide-btn .slide-paging p.all{position: relative; color: #bbb; padding-left: 20px;}
.sec03 .slide-ui .slide-btn .slide-paging p.all::before{content:""; position: absolute; top: 50%; left: 0; width: 1px; height: 16px; background: #bbb; transform: translateY(-50%);}
.sec03 .slide-ui .progress{position: relative; width: 100%;}
.sec03 .slide-ui .progress *{display: block;}
.sec03 .slide-ui .progress .time{position: absolute; top: 0; left: 0; width: 10%; height: 2px; background: var(--color-point01); border-radius:5px; transition: 0.4s;}
.sec03 .slide-ui .progress .bg{background: #eee; width: 100%; height: 2px; border-radius:5px}


/* sec04 */
.sec04{padding: 150px 0; overflow: hidden;}
.sec04 h2{font-weight: 600; font-size: var(--font80); margin-bottom: 60px; padding-left: calc((100vw - 1720px) / 2);;}
.sec04 .slide-wrap .slick-list .slick-track{left: calc((100vw - 1720px) / 2);}
.sec04 .slide-wrap .item{position: relative; width: 1100px; aspect-ratio: 1100 / 500; margin-right: 20px; border-radius:10px; overflow: hidden;}
.sec04 .slide-wrap .item::before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); opacity: 0; transition: 0.3s; z-index: 1;}
.sec04 .slide-wrap .item a{display: block;}
.sec04 .slide-wrap .item a,
.sec04 .slide-wrap .item figure{width: 100%; height: 100%;}
.sec04 .slide-wrap .item figure img{width: 100%; height: 100%; object-fit: cover; transition: 0.3s; transform: scale(1);}
.sec04 .slide-wrap .item .txt{position: absolute; bottom: 0; left: 0; padding: 0 60px; opacity: 0; transition: 0.3s; z-index: 2;}
.sec04 .slide-wrap .item .txt strong{font-weight: 600; font-size: 64px; color: #fff;}
.sec04 .slide-wrap .item .p-more{position: absolute; bottom: 0; right: 0; width: 180px; height: 180px; background: url("/img/main/main-bg01.png") 50% 50% / cover no-repeat; z-index: 2; opacity: 0; transition: 0.3s;}
.sec04 .slide-wrap .item .p-more p{position: absolute; bottom: 35px; right: 22px; font-weight: 600; font-size: var(--font24); color: #fff ;}
.sec04 .slide-ui{ position: relative;}
.sec04 .slide-ui .prev,
.sec04 .slide-ui .next{position: static; transform: translate(0);}
.sec04 .slide-ui .slide-btn{display:flex; gap:0 30px; align-items: center; justify-content: center; margin-top: 45px;}
.sec04 .slide-ui .slide-btn .slide-paging ul{display:flex; gap:0 15px; align-items: center;}
.sec04 .slide-ui .slide-btn .slide-paging ul li{height: 10px;}
.sec04 .slide-ui .slide-btn .slide-paging ul li button{display: block; width: 10px; height: 10px; font-size: 0; background: #DDDDDD; padding: 0;cursor: pointer;}
.sec04 .slide-ui .slide-btn .slide-paging ul li.slick-active button{background: #111;}



.sec05{padding: 100px 0 200px;}
.sec05 .flex-box{display:flex; align-items: flex-start; justify-content: space-between;}
.sec05 .txt-box{position: sticky; top: 318px; padding-bottom: 118px;}
.sec05 .txt-box h2{font-weight: 600; font-size: var(--font80); margin-bottom: 40px;}
.sec05 .txt-box P{font-size: var(--font24); line-height: 1.66666em;}
.sec05 .img-box{width: calc(100% - 810px); margin-left: auto ;}
.sec05 .img-box{display:flex; gap:0 30px; align-items: center;}
.sec05 .img-box .box .item{margin-bottom: 30px;}
.sec05 .img-box .box .item:last-of-type{margin-bottom: 0;}
.sec05 .img-box .item{position: relative; border-radius:10px; overflow: hidden;}
.sec05 .img-box .item::before{content:""; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: linear-gradient(180deg,rgba(92, 21, 221, 1) 10%, rgba(50, 11, 119, 1) 100%); opacity: 0; transform: translate(-50%, -50%)scale(0); transform-origin: 50%; border-radius:50%; transition: 0.6s;}
.sec05 .img-box .item .txt{position: absolute; transform: translateY(60px); width: 100%; bottom: 40px; padding: 0 40px; transition: 0.3s;}
.sec05 .img-box .item .txt strong{font-weight: 600; font-size: 40px; color: #fff;}
.sec05 .img-box .item .txt a{margin-top: 10px; color: var(--color-point02); opacity: 0;}
.sec05 .img-box .item .txt a span{display: inline-block; vertical-align: top; transform: translateX(-20px); transition: 0.3s;}
.sec05 .img-box .item .txt a svg{transform: translateX(-18px);}


@media (hover: hover){
    .sec03 .slide-wrap .item:hover{transform: translateY(-20px);border-color: var(--color-point01); }
    .sec03 .slide-wrap .item:hover a .txt .read-btn{opacity: 1; visibility: visible;}

    .sec04 .slide-wrap .item:hover::before{opacity: 0.8;}
    .sec04 .slide-wrap .item:hover .txt{bottom: 60px; opacity: 1;}
    .sec04 .slide-wrap .item:hover figure img{transform: scale(1.1);}
    .sec04 .slide-wrap .item:hover .p-more{opacity: 1;}

    .sec05 .img-box .item:hover .txt a{opacity: 1;}
    .sec05 .img-box .item:hover .txt{transform: translateY(0);}
    .sec05 .img-box .item:hover::before{transform:  translate(-50%, -50%) scale(10); opacity: 0.8;}
    .sec05 .img-box .item .txt a:hover span{transform: translateX(0);}
    .sec05 .img-box .item .txt a:hover svg{transform: translateX(5px);}
    .sec05 .img-box .item .txt a:hover svg path{stroke: #111;}
    .sec05 .img-box .item .txt a:hover{background-color: var(--color-point02); color: #111;}    
}
@media screen and (max-width:1840px) {
    .mv .slide-wrap .item .tit{ left: 0; padding: 0 clamp(16px,3.26vw, 60px);}
    .mv .slide-wrap .item .tit h2{font-size: clamp(40px,5.43vw,100px);}
    .mv .slide-wrap .item .tit p{margin: clamp(20px,2.17vw,40px) 0 clamp(30px,3.26vw,60px);  font-size: clamp(17px,1.2vw,22px);}
    .mv .slide-wrap .item02 .tit{ right: 0;}  
    .sec02 .slide-wrap .item .txt{padding: 0 clamp(16px,1.63vw,30px);}
    .sec02 .slide-wrap .item .txt figure{margin-top: clamp(20px,21.63vw,30px); height: clamp(70px,4.89vw,90px);}
    .sec02 .slide-wrap .item .txt figure img{max-width: 80%; max-height: 100%;}
    .sec02 .slide-wrap .item .txt p{margin: 6px 0 20px;}
    .sec02 .slide-wrap .item .txt a.view-btn{margin-bottom: clamp(26px, 2.72vw, 50px);}
    .sec02 .slide-wrap .item:hover .txt{height: clamp(360px, 25.87vw, 476px);}
	.sec03 .about-btn{width: clamp(180px, 8.7vw, 230px);}
    .sec03{padding: clamp(80px, 8.15vw, 150px) 0 clamp(80px, 9.13vw, 168px);}
    .sec03 .flex-box{margin-bottom: clamp(20px,3.26vw,60px);}
    .sec04{padding: clamp(80px, 8.15vw, 150px) 0}
    .sec04 h2{margin-bottom: clamp(20px,3.26vw,60px); padding-left: clamp(16px,3.26vw, 60px)}
    .sec04 .slide-wrap .slick-list .slick-track{left: clamp(16px,3.26vw, 60px);}
    .sec04 .slide-wrap .item{width: clamp(700px,59.78vw,1100px);}
    .sec04 .slide-wrap .item .txt strong{font-size: clamp(38px, 3.48vw, 64px);}
    .sec05{padding: clamp(80px, 8.15vw, 150px) 0 clamp(120px, 10.87vw, 200px);}
    .sec05 .img-box{width: calc(100% - clamp(400px,44.02vw,810px));}
    .sec05 .img-box .item .txt{padding:0 clamp(16px,2.17vw,40px);} 
    .sec05 .img-box .item .txt strong{font-size: clamp(30px,2.17vw,40px);}
    .sec05 .txt-box h2{margin-bottom: clamp(14px, 2.17vw, 40px);}
}
@media screen and (max-width:1500px) {
    .sec03 .slide-wrap .slick-list{margin-right: -20px;}
    .sec03 .slide-wrap .item{margin-right: 20px; }
    .sec04 .slide-wrap .item:hover .txt{bottom: 30px;}
    
}
@media screen and (max-width:1200px) {
    .sec05 .flex-box{gap:0 40px}
    .sec05 .txt-box{flex-shrink: 0;}
    .sec05 .img-box{width: 60%;}
    .sec05 .img-box .item .txt{bottom: 20px;}
}
@media screen and (max-width:1024px) {
    .mv .slide-wrap .item02 .tit p br{display: none;}
    .sec03 .slide-ui{gap:0 30px;margin-top: 26px;}
    .sec03 .slide-wrap .item a .txt{padding: clamp(16px,2.93vw,30px);}
    .sec03 .slide-wrap .item a .txt p{margin-top: 12px;}
    .sec04 .slide-wrap .item .txt{padding: 0 30px;}
    .sec04 .slide-wrap .item{width: 600px;}
    .sec04 .slide-ui .slide-btn{margin-top: 26px;}
    .sec05 .flex-box{flex-wrap:wrap;}
    .sec05 .flex-box .txt-box{position: static; padding-bottom: 30px; width: 100%; text-align: center;}
    .sec05 .txt-box P br:nth-of-type(1),
    .sec05 .txt-box P br:nth-of-type(3){display: none;}
    .sec05 .img-box{width: 100%; justify-content: center;}
}
@media screen and (max-width:768px) {
	.sec02{padding-top: 240px;}
    .sec02::after,
    .sec02::before{display: none;}
    .sec02 .slide-wrap{padding: 0 30px;}
    .sec02 .slide-wrap .item.slick_now .txt{height: clamp(360px, 25.87vw, 476px);}
    .sec04 .slide-wrap .item{width: 100%;}
    .sec04 .slide-wrap .slick-list{margin-right: -20px;}
    .sec04 .slide-wrap .item .txt{padding: 0 16px; bottom: 30px; opacity: 1;}
    .sec04 .slide-wrap .item .txt strong{font-size: 26px;}
    .sec04 .slide-wrap .item::before{opacity: 0.8;}
    .sec04 .slide-wrap .item .p-more{opacity: 1;}
    .sec04 .slide-wrap .slick-list .slick-track{left: 0;}
}
@media screen and (max-width:540px) {
    .sec02 .slide-btn{display:flex; align-items: center; justify-content: center; gap:0 20px; margin-top: 30px;}
    .sec02 .slide-btn > div{position: static; transform: translateY(0);}
    .sec05 .img-box{flex-wrap:wrap; gap:0}
    .sec05 .img-box .box{width: 100%; margin-bottom: 20px;}
    .sec05 .img-box .item{width: 100%;}
    .sec05 .img-box .item figure img{width: 100%; object-fit: cover; max-height: 340px;}
    .sec05 .img-box .item .txt{bottom: 40px; transform: translateY(0);}
    .sec05 .img-box .item .txt strong{font-size: 38px;}
    .sec05 .img-box .item .txt a{opacity: 1; margin-top: 20px; background: var(--color-point02); color: #111;}
    .sec05 .img-box .item .txt a span{transform: translateX(0);}
    .sec05 .img-box .item .txt a svg{transform: translateX(5px);}
    .sec05 .img-box .item .txt a svg path{stroke: #111;}
}