@charset "utf-8";

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

main{padding-top: 90px;font-family: 'Pretendard', "Pretendard Variable", Pretendard;}
main *{font-family: 'Pretendard', "Pretendard Variable", Pretendard;}
/* 젠틀몬스터 스타일 horizontal line pagination */
main section{position: relative;}
main .hgroup{display: flex;gap:20px;align-items: center;}
main .hgroup h3{  font-size: 20px;font-weight: 500;letter-spacing: -0.4px;color: #202020;}
main .hgroup a{position: relative;font-size: 15px;font-weight: normal;letter-spacing: -0.3px;color: #202020;padding-right: 15px;}
main .hgroup a:after{content: "";position: absolute;right:0;top:4px;width:10px;height:10px;background: url(/_public/images/icon/ico_view.svg) no-repeat;background-size: cover;}
main .layout{max-width:1800px;}
main .section01{height: calc(1svh * 84);max-height:850px;}
main .section01 .mainSwiper{height:100%;}
main .section01 .swiper-slide{height:100%;}
main .section01 .swiper-slide .video-wrap{height:100%;}
main .section01 .swiper-slide .img-wrap{height:100%;}
main .section01 .swiper-slide img{width:100%;height:100%;display: block;object-fit: cover;}
main .section01 .swiper-slide video{width:100%;height:100%;display: block;object-fit: cover;}
main .section01 .swiper-slide .btn-box{position: absolute;left:0;bottom:80px;width:100%;display: flex;justify-content: center;gap:10px;}
main .section01 .swiper-slide .btn-box a{display: flex;align-items: center;padding:0 20px;height:34px;border-radius: 17px;border: solid 1px #808080;font-size: 15px;font-weight: normal;letter-spacing: -0.3px;color: #202020;line-height: 1;}
main .section01 .swiper-pagination {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;gap: 8px;z-index: 10;width: auto;}
main .section01 .swiper-pagination-bullet {width: 60px;height: 4px;border-radius: 0;background: rgba(32, 32, 32, 0.5);position: relative;cursor: pointer;opacity: 1;margin: 0 !important;}
main .section01 .swiper-pagination-bullet .progress-line {position: absolute;top: 0;left: 0;width: 0%;height: 100%;background: #202020;border-radius:0;transition: width 0.1s ease;}
main .section01 .swiper-pagination-bullet.completed .progress-line {width: 100% !important;}
main .section01 .swiper-pagination-bullet.swiper-pagination-bullet-active .progress-line {transition: none;}
main .section01 .swiper-pagination-bullet.loading::before {background: rgba(255, 255, 255, 0.5);animation: pulse 1.5s ease-in-out infinite;}

main .section02{padding:80px 60px 100px;}
main .section02 .box{margin-top:25px;position: relative;}
main .section02 .box .item-tab{display: flex;gap:15px;}
main .section02 .box .item-tab button{position:relative;display:inline-block;font-size: 16px;font-weight: 300;letter-spacing: -0.32px;color: #202020;padding-bottom: 2px;}
main .section02 .box .item-tab button:after{content: "";position: absolute;left:0;bottom:0;width:100%;height: 2px;background: #202020;display: none;}
main .section02 .box .item-tab button.on{font-weight: 600;}
main .section02 .box .item-tab button.on:after{display: block;}
main .section02 .box .item-cont{display: none;margin-top:15px;}
main .section02 .box .itemSwiper{}
main .section02 .box .itemSwiper .swiper-slide{}
main .section02 .box .itemSwiper .swiper-slide .img{position: relative;}
main .section02 .box .itemSwiper .swiper-slide .img img{display: block;width:100%;}
main .section02 .box .itemSwiper .swiper-slide .item-info{margin-top: 10px;}
main .section02 .box .itemSwiper .swiper-slide .item-info h4{font-size: 16px;font-weight: 500;letter-spacing: -0.32px;color: #202020;}
main .section02 .box .itemSwiper .swiper-slide .item-info p{margin-top:3px;font-size: 15px;font-weight: normal;letter-spacing: -0.3px;color: #202020;}
main .section02 .box .itemSwiper .swiper-slide .item-info span{display:flex;margin-top:20px;align-items: center;justify-content: center;width:104px;height:30px;border-radius: 15px;border: solid 1px #808080;font-size: 15px;font-weight: normal;letter-spacing: -0.3px;color: #202020;line-height: 1;}
main .section02 .box .thumbs-box{position: absolute;top:-30px;right:0;width:100%;max-width:470px;}
main .section02 .box .thumbs-box .swiper-slide{border:1px solid #e9e9e9;cursor: pointer;}
main .section02 .box .thumbs-box .swiper-slide img{display: block;width:100%;}
/*main .section02 .box .thumbs-box .swiper-slide.swiper-slide-active{border-color:#202020;}*/
main .section02 .box .thumbs-box .swiper-slide.thumb-active{border-color:#202020;}


main .section03{padding:100px 0 120px;}
main .section03 .slide-box{margin-top:15px;padding-left: 60px;}
main .section03 .slide-box .swiper-slide{width:300px;}
main .section03 .slide-box .swiper-slide a{display: block;}
main .section03 .slide-box .swiper-slide .img{position: relative;}
main .section03 .slide-box .swiper-slide .img img{display:block;width:100%;}
main .section03 .slide-box .swiper-slide .item-info{margin-top:15px;}
main .section03 .slide-box .swiper-slide .item-info h4{font-size: 15px;font-weight: 500;letter-spacing: -0.3px;color: #202020;}
main .section03 .slide-box .swiper-slide .item-info p{margin-top:2px;font-size: 13px;font-weight: normal;letter-spacing: -0.26px;color: #808080;}


@media all and (max-width: 1800px){
    main .section03 .layout{padding:0 40px;}
}
@media all and (max-width: 1600px){
    main .section02{padding:80px 40px 100px;}
    main .section03{padding:100px 0 120px;}
    main .section03 .layout{padding:0 40px;}
}
@media all and (max-width: 1460px){}
@media all and (max-width: 1280px){
    main .hgroup h3{font-size:18px;}
    main .section02{padding:60px 20px 80px;}
    main .section03{padding:80px 0 100px;}
    main .section03 .layout{padding:0 20px;}
    main .section03 .slide-box{padding-left:20px;}
}
@media all and (max-width: 1024px){
    main{padding-top: 60px;}
    main .hgroup h3{font-size:16px;}
    main .hgroup a{font-size:13px;}
    main .hgroup a:after{width:8px;height:8px;top:4px;}
    main .section01 .swiper-slide .btn-box{bottom:60px;}
    main .section01 .swiper-slide .btn-box a{height:30px;padding:0 15px;font-size:13px;}
    main .section01 .swiper-pagination{gap:5px;}
    main .section01 .swiper-pagination-bullet{width:40px;height:2px;}

    main .section02 .box{margin-top:15px;}
    main .section02 .box .item-tab{gap:10px;}
    main .section02 .box .item-tab button{font-size:14px;}
    main .section02 .box .itemSwiper .swiper-slide .item-info h4{font-size:14px;}
    main .section02 .box .itemSwiper .swiper-slide .item-info p{font-size:12px;}
    main .section02 .box .itemSwiper .swiper-slide .item-info span{margin-top:15px;width:90px;height:26px;font-size: 13px;}

    main .section03 .slide-box .swiper-slide{width:200px;}
    main .section03 .slide-box .swiper-slide .item-info{margin-top:10px;}
    main .section03 .slide-box .swiper-slide .item-info h4{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    main .section03 .slide-box .swiper-slide .item-info p{}
}
@media all and (max-width: 768px){
    main{}
    main .hgroup{justify-content: space-between;}
    main .hgroup h3{font-size:14px;}
    main .hgroup a{font-size:12px;padding-right: 10px;}
    main .hgroup a:after{top:3px;}
    main .section01{}
    main .section01 .mainSwiper{height:100%;}

    main .section02{padding:40px 20px 50px;}
    main .section02 .box .item-tab button{font-size: 13px;}
    main .section02 .box .thumbs-box{position: relative;top:0;max-width:100%;margin-bottom: 10px;}
    main .section02 .box .thumbs-box .swiper-slide{width:40px;}
    main .section02 .box .item-cont{margin-top: 25px;}
    main .section02 .box .itemSwiper .swiper-slide .item-info span{font-size: 12px;}
    main .section03 .slide-box .swiper-slide .item-info h4{font-size:13px;}
    main .section03 .slide-box .swiper-slide .item-info p{font-size:12px;}


    main .section03{padding:50px 0px;}
    main .section03 .slide-box{margin-top:25px;}
    main .section03 .slide-box .swiper-slide{width:100px;}
}
@media all and (max-width: 460px){}