@charset "utf-8";

.keyVisual{width:100%;height: 800px;
    --swiper-pagination-bullet-width:18px;
    --swiper-pagination-bullet-height:18px;
    --swiper-pagination-bullet-inactive-color:transparent;
    --swiper-pagination-color:#ffffff;
    --swiper-pagination-bullet-horizontal-gap:0;
}
.keyVisual .keyVisual-item{position: relative;overflow: hidden;}
.keyVisual .keyVisual-item .bg{width: 100%;height: 100%;display: block;object-fit: cover;}
.keyVisual .text-box{width: 100%;position: absolute;top:50%;transform: translateY(-50%);color:#ffffff;z-index: 1;pointer-events: none;}
.keyVisual .text-box .container{display: flex;flex-direction: column;row-gap: 30px;}
.keyVisual .text-box h2{font-size: 80px;font-weight: 700;display: block;}
.keyVisual .text-box p{font-size: 20px;font-weight: 400;line-height: 1.5;display: block;}
.keyVisual .keyVisual-pagination{display: flex;column-gap: 15px;margin-top: 20px;}
.keyVisual .swiper-pagination-bullet{border:1px solid #ffffff;opacity: 1;transition-duration: 0.3s;}


.product-section{padding:176px 0 217px;}
.product-section .section-top{display: flex;justify-content: space-between;align-items: center;}
.product-section .section-top .section-title{display: flex;align-items: center;column-gap: 30px;}
.product-section .section-top .section-title h2{font-size: 55px;font-weight: 900;color:#000000;}
.product-section .section-top .section-title p{font-size: 18px;font-weight: 400;color:#666666;}
.product-section .section-top .more-button{width: 220px;height: 70px;font-size: 18px;font-weight: 400;color:#666666;display: inline-flex;justify-content: center;align-items: center;column-gap: 8px;border:1px solid #E5E5E5;border-radius: 999px;transition-duration: 0.3s;transition-property:box-shadow ;}
.product-section .section-top .more-button::after{content:'';display: block;background-image: url("../images/icons/icon-more.svg");background-repeat: no-repeat;background-size: cover;width: 32px;height: 32px;transition-duration: 0.3s;transition-property:transform ;}
.product-section .section-top .more-button:hover{box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.08);}
.product-section .section-top .more-button:hover::after{transform: rotate(45deg);}
.product-section .list-box{display: flex;flex-wrap:wrap;gap: 40px 38px;margin-top: 100px;position: relative;}
.product-section .list-box::after{content:"PRETECH";font-size: 350px;font-weight: 900;color:rgba(242,242,242,0.5);position: absolute;bottom:0;left: 40px;line-height: 1;transform: translateY(50%);}
.product-section .list-box .list-item{width: calc((100% - 76px) / 3);height: 500px;padding:50px 30px;display: flex;flex-direction: column;row-gap: 25px;position: relative;background-color: #ffffff;z-index: 1;}
.product-section .list-box .list-item::before{content:'';width: 100%;height: 100%;border:1px solid #E5E5E5;border-radius: 20px;position: absolute;top:0;left: 0;transition-duration: 0.6s;transition-property: border-color,box-shadow;}
.product-section .list-box .list-item .img-box{width:100%;height: 260px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.product-section .list-box .list-item .img-box img{max-height: 100%;height: auto;object-fit: contain;display: block;}
.product-section .list-box .list-item .text-box{display: flex;flex-direction: column;align-items: center;row-gap: 20px;}
.product-section .list-box .list-item .text-box .title{font-size: 24px;font-weight: 700;color:#000000;    height: 60px;}
.product-section .list-box .list-item .text-box .more{font-size: 16px;font-weight: 500;color:#666666;display: inline-flex;align-items: center;column-gap: 8px;}
.product-section .list-box .list-item .text-box .more::after{content:'';display: block;background-image: url("../images/icons/icon-more.svg");background-repeat: no-repeat;background-size: cover;width: 32px;height: 32px;}
.product-section .list-box .list-item:hover::before{border:3px solid #1B3AA5;box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1);}
.product-section .list-box .no-product{text-align: center;display: flex;justify-content: center;align-items: center;width: 100%;font-size: 2rem;position: relative;z-index: 1;height: 30rem;color: #666666;background-color: #e9e9e980;border-radius: 1rem;}

.news-section{}
.news-section .section-top{display: flex;flex-direction:column;align-items: flex-start;row-gap: 40px;}
.news-section .section-top::after{content:'';display: block;background-image: url("../images/icons/icon-main-news.svg");background-size: cover;background-repeat: no-repeat;width: 140px;height: 167px;margin-top: 30px;}
.news-section .section-top .section-title{display: flex;flex-direction: column;row-gap: 20px;}
.news-section .section-top .section-title h2{font-size: 55px;font-weight: 900;color:#000000;}
.news-section .section-top .section-title p{font-size: 18px;font-weight: 400;color:#666666;}
.news-section .section-top .more-button{width: 220px;height: 70px;font-size: 20px;font-weight: 400;color:#666666;display: inline-flex;justify-content: center;align-items: center;column-gap: 8px;border:1px solid #E5E5E5;border-radius: 999px;transition-duration: 0.3s;transition-property:box-shadow ;}
.news-section .section-top .more-button::after{content:'';display: block;background-image: url("../images/icons/icon-more.svg");background-repeat: no-repeat;background-size: cover;width: 32px;height: 32px;transition-duration: 0.3s;transition-property:transform ;}
.news-section .section-top .more-button:hover{box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.08);}
.news-section .section-top .more-button:hover::after{transform: rotate(45deg);}
.news-section .section-wrapper{display: flex;justify-content: space-between;}
.news-section .list-box{display: flex;flex-direction: column;width: 100%;max-width: 700px;}
.news-section .list-box .list-item{padding:35px 10px;display: flex;justify-content: space-between;column-gap: 50px;border-bottom:1px solid #E5E5E5;transition-duration: 0.3s;transition-property: background-color;position: relative;}
.news-section .list-box .list-item:first-of-type{border-top:1px solid #E5E5E5;}
.news-section .list-box .list-item .subject{font-size: 18px;font-weight:400;color:#333333;padding:0 16px;}
.news-section .list-box .list-item .subject::before{content:'';border-radius: 10px;position: absolute;top:50%;transform: translateY(-50%);left: 10px;width: 6px;height: 6px;display: block;background-color: #E9E9E9;}
.news-section .list-box .list-item .date{font-size: 18px;font-weight:400;color:#999999;}
.news-section .list-box .list-item:hover{background-color:#fafafa;}
.news-section .list-box .no-product{text-align: center;display: flex;justify-content: center;align-items: center;width: 100%;font-size: 1.6rem;position: relative;z-index: 1;height: 30rem;color: #666666;}

.partner-section{padding:200px 0 180px;}
.partner-section .section-top{}
.partner-section .section-top .section-title{display: flex;align-items:center;flex-direction: column;row-gap: 20px;}
.partner-section .section-top .section-title h2{font-size: 55px;font-weight: 900;color:#000000;}
.partner-section .section-top .section-title p{font-size: 18px;font-weight: 400;color:#666666;}
.partner-section .list-box{display: flex;flex-wrap:wrap;gap: 50px 60px;margin-top: 80px;position: relative;}
.partner-section .list-box .list-item{width: calc((100% - 120px) / 3);height: 140px;display: flex;border:1px solid #E5E5E5;border-radius: 10px;justify-content: center;align-items: center;flex-direction: column;row-gap: 25px;position: relative;background-color: #ffffff;z-index: 1;padding:10px;}
.partner-section .list-box .list-item img{max-width: 100%;max-height: 100%;height: auto;}

@media screen and (max-width: 1024px) {
    .keyVisual .keyVisual-item .bg{object-position:80%;}

    .product-section .section-top {display: flex;flex-direction: column;justify-content: space-between;row-gap: 3rem;align-items: flex-start;}
    .product-section .list-box {gap: 3rem 2rem;}
    .product-section .list-box .list-item {width: calc((100% - 2rem) / 2);}

    .news-section .section-wrapper {display: flex;flex-direction: column;justify-content: space-between;}
    .news-section .list-box {max-width: 100%;margin-top: 4rem;}

    .news-section .section-top{position: relative;row-gap: 3rem;}
    .news-section .section-top::after {width: 14rem;height: 16.7rem;margin-top: 0;position: absolute;top:50%;transform: translateY(-50%);right: var(--container-padding);}

    .partner-section .list-box {gap: 2rem;margin-top: 4rem;}
    .partner-section .list-box .list-item {width: calc((100% - 4rem) / 3);height: 14rem;padding: 1rem;}
}

@media screen and (max-width: 820px) {
    .product-section {padding: 5rem 0 ;}
    .product-section .section-top .section-title {display: flex;flex-direction: column;align-items: flex-start;row-gap: 1rem;}

    .partner-section {padding: 7rem 0 ;}
    .partner-section .section-top .section-title {row-gap: 1rem}
    .partner-section .section-top .section-title h2 {font-size: 5.5rem;}
    .partner-section .section-top .section-title p {font-size: 2.4rem;}
}

@media screen and (max-width: 720px) {


    .keyVisual{height: 70rem;
        --swiper-pagination-bullet-width:1.8rem;
        --swiper-pagination-bullet-height:1.8rem;
    }

    .keyVisual .keyVisual-pagination {display: flex;column-gap: 1.5rem;justify-content: center;margin: 0 auto;}
    .keyVisual .text-box {text-align: center;}
    .keyVisual .text-box .container {row-gap: 5rem;}
    .keyVisual .text-box h2 {font-size: 8rem;}
    .keyVisual .text-box p {font-size: 2.4rem;}
    .keyVisual .keyVisual-item .bg{object-position: 70%;}

    .product-section .section-top .section-title h2 {font-size: 5.5rem;}
    .product-section .section-top .section-title p {font-size: 2.4rem;}
    .product-section .section-top .more-button {width: 30rem;height: 8rem;font-size: 2.4rem;column-gap: 1rem;}
    .product-section .section-top .more-button::after {width: 3.2rem;height: 3.2rem;}

    .product-section .list-box {margin-top: 5rem;}
    .product-section .list-box .list-item {width: calc((100% - 2rem) / 2);height: auto;aspect-ratio: 320 / 500;padding: 5rem 3rem;row-gap: 2rem;}
    .product-section .list-box .list-item .img-box {height: 26rem;}
    .product-section .list-box .list-item .text-box .title {font-size: 2.8rem;line-height: 3.2rem;height: 6.4rem;}
    .product-section .list-box .list-item .text-box {row-gap: 2rem}
    .product-section .list-box .list-item .text-box .more {font-size: 2.4rem;column-gap: 1rem;}
    .product-section .list-box .list-item .text-box .more::after {width: 3.2rem;height: 3.2rem}
    .product-section .list-box::after {font-size: 20rem;left: 8rem;}


    .news-section .section-top .section-title h2 {font-size: 5.5rem;}
    .news-section .section-top .section-title p {font-size: 2.4rem;}
    .news-section .section-top .more-button {width: 22rem;height: 8rem;font-size: 2.4rem;column-gap: 1rem;}
    .news-section .section-top .more-button::after {width: 3.2rem;height: 3.2rem;}

    .news-section .list-box .list-item {padding: 3.6rem 1rem;display: flex;column-gap: 5rem;}
    .news-section .list-box .list-item .subject {font-size: 2.4rem;padding: 0 1.6rem;height: 1em;}
    .news-section .list-box .list-item .subject::before {left: 1rem;width: .6rem;height: .6rem;}
    .news-section .list-box .list-item .date {font-size: 2.4rem;}

    .partner-section .list-box .list-item {width: calc((100% - 2rem) / 2);padding: 2rem 5rem;}
}