@charset "utf-8";

main{ padding:0}
main .main-hgroup{text-align: center;}
main .main-hgroup em{display: inline-block; font-size: 22px;font-weight: bold;letter-spacing: -0.88px;color: #ff8600;}
main .main-hgroup h2{margin-top:15px;font-size: 50px;font-weight: bold;line-height: 1.4;letter-spacing: -2px;text-align: center;color: #202020;}
main .main-hgroup p{margin-top:25px;font-size: 24px;font-weight: 500;letter-spacing: -0.48px;text-align: center;color: #202020;word-break: keep-all;}
main section{position: relative;}
main .section01{position:relative; height:100vh; height: calc(1svh * 100); max-height:950px; overflow:hidden;}
main .section01 .swiper-slide::before { content: ""; background: rgb(0 0 0 / 20%); position: absolute;display: block; width: 100%; height: 100%; z-index: 2}
main .section01 .mainSwiper{height:100%;}
main .section01 .swiper-slide{height:100%;}
main .section01 .swiper-slide .img-wrap,
main .section01 .swiper-slide .video-wrap{position: relative;height:100%;}
main .section01 .swiper-wrapper{height:100%;}
main .section01 .swiper-slide img{display: block;width:100%;height:100%;object-fit: cover;}
main .section01 .swiper-slide video{display: block;width:100%;height:100%;object-fit: cover;}
main .section01 .swiper-slide .txt{position: absolute;left:50%;bottom:330px;transform: translateX(-50%);width:100%;max-width:1680px;z-index: 10; padding: 0 50px;}
main .section01 .swiper-slide .txt .t1{overflow: hidden;}
main .section01 .swiper-slide .txt .t2{ margin-top:15px;}
main .section01 .swiper-slide .txt .t2 a { margin-top: 30px; background: rgb(255 255 255 / 20%); display:inline-block;font-size: 20px; color: #fff; border: 1px solid #fff; border-radius: 5px; padding: 10px 20px }
main .section01 .swiper-slide .txt .t2 a:hover { font-weight: bold;}
main .section01 .swiper-slide .txt em{display: inline-block;font-size:24px; margin-top: 30px;font-weight: 400;color: #fff;}
main .section01 .swiper-slide .txt h3{transition: all 0.3s;font-size: 68px;font-weight: bold;line-height: 1.2;color: #fff;}
main .section01 .swiper-slide .txt h3 .br{display: none;}
main .section01 .swiper-slide.swiper-slide-active .txt em{animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;}
main .section01 .swiper-slide.swiper-slide-active .txt h3{animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.4s both;}



main .section01 .swiper-pagination{position: absolute;width:100%;max-width:1580px;bottom:250px;left:50%;transform: translateX(-50%);display: flex;gap:16px;}
main .section01 .swiper-pagination .swiper-pagination-bullet{ position:relative; margin: 0 10px;width:8px;height:8px;border-radius: 100%;background: #fff;opacity: 1;transition: all 0.3s;}
main .section01 .swiper-pagination .swiper-pagination-bullet-active{ background: #fff; }
main .section01 .swiper-pagination .swiper-pagination-bullet::before {content: ""; display: block;border-radius: 99px; width: 14px; height: 14px; border: 1px solid none; padding: 11px;top: -15px;position: absolute; left: -15px;}
main .section01 .swiper-pagination .swiper-pagination-bullet-active::before {content: ""; border: 1px solid #fff; }


main .section01 { position: relative;}
main .section01 .scrollicon { z-index: 50;position: absolute; display: inline-flex; flex-direction: column;transform: translateX(-50%); align-items: center; gap: 6px; color: #fff;bottom: 30px; left: 50%}
/* i 태그만 움직임 */
main .section01 .scrollicon span { font-size: 16px;font-weight: 500;}
main .section01 .scrollicon i { font-size: 20px; font-weight: 600;display: inline-block; animation: scrollMove 1.1s ease-in-out infinite;}

/* 위 ↕ 아래 반복 */
@keyframes scrollMove {
  0% { transform: translateY(0);   opacity: 1; }
  50% { transform: translateY(10px); /* 내려감 */ opacity: 0.7; }
  100% {transform: translateY(0); opacity: 1;}
}



main .section02 { padding: 140px 0}
main .section02 h2 { font-size: 50px; margin-bottom: 60px; text-align: center;}
main .section02 .product_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 24px; margin-bottom: 90px}
main .section02 .product_list .probox { }
main .section02 .product_list .probox .pr_img { border-radius: 10px; background: #f1f2f6; padding:18px;height: 350px;aspect-ratio: auto;position: relative; display: flex;justify-content: center;
align-items: center;}
main .section02 .product_list .probox .pr_img em { background: #fff; bottom: 15px; right:15px; position: absolute; color: #04327B; font-size: 16px; font-weight: bold; padding: 3px 10px; border: 1px solid #04327B; border-radius: 5px}
main .section02 .product_list .probox .pr_img img { display: block;height: auto; }
main .section02 .product_list .probox{ display: flex; flex-direction: column;	}
main .section02 .product_list .probox h3{ margin-top: 20px; font-size: 25px; color: #04327B	}
main .section02 .product_list .probox span{  margin-top: 7px; color: #787878; font-size: 19px; font-weight: bold; display: block;}

main .section02 .product_tap { display: block; margin-bottom: 60px}
main .section02 .product_tap ul {display: flex;align-items: center;gap: 15px;justify-content: center;}
main .section02 .product_tap ul li { }
main .section02 .product_tap ul li a { border: 1px solid #202020;background: #fff;padding: 15px 25px;border-radius: 10px;font-size: 18px;font-weight: 600;}
main .section02 .product_tap ul li.on a { background: #202020; color: #fff}


main .section03 { background: url(/_public/images2/main/main_section03_bg.png); padding: 160px 0;  background-size: cover;}
main .section03 .ahead { }
main .section03 .ahead h2 { font-size: 60px; color: #fff; margin-bottom: 50px; line-height: 1}
main .section03 .ahead p { font-size: 28px; color: #ccc; font-weight: 500; margin-bottom: 80px;}
main .section03 .ahlink { display:flex; gap:15px}
main .section03 .ahlink a {position: relative; background: #F4F5F9; flex: 1; padding:60px 50px 150px;}
main .section03 .ahlink a span { color: #202020; font-size: 30px; font-weight: bold; margin-top: 30px; display: block;}
main .section03 .ahlink a i { }
main .section03 .ahlink a i { display: block; width: 49px; height: 49px; }
main .section03 .ahlink a:first-child i { background: url(/_public/images2/main/ahlink_ico01.svg);background-size: cover;}
main .section03 .ahlink a:nth-child(2) i { background: url(/_public/images2/main/ahlink_ico02.svg);background-size: cover;}
main .section03 .ahlink a:nth-child(3) i { background: url(/_public/images2/main/ahlink_ico03.svg);background-size: cover;}
main .section03 .ahlink a:nth-child(4) i { background: url(/_public/images2/main/ahlink_ico04.svg);background-size: cover;}
main .section03 .ahlink a em {position: absolute; right: 40px;  bottom: 40px; width: 60px; height: 60px; background: url(/_public/images2/main/ahlink_ico05.svg) no-repeat center;
background-size: cover; transition: all 0.3s;}

main .section03 .ahlink a:hover { background: #5481C2}
main .section03 .ahlink a:hover span { color:#fff}
main .section03 .ahlink a:hover em { bottom: 60px; }
main .section03 .ahlink a:hover:first-child i { background: url(/_public/images2/main/ahlink_ico01_hover.svg);background-size: cover;}
main .section03 .ahlink a:hover:nth-child(2) i { background: url(/_public/images2/main/ahlink_ico02_hover.svg);background-size: cover;}
main .section03 .ahlink a:hover:nth-child(3) i { background: url(/_public/images2/main/ahlink_ico03_hover.svg);background-size: cover;}
main .section03 .ahlink a:hover:nth-child(4) i { background: url(/_public/images2/main/ahlink_ico04_hover.svg);background-size: cover;}


main .section04 { background:#F4F5F9; padding: 160px 0}
main .section04 h2 { font-size: 50px; margin-bottom: 60px; text-align: center;}
main .section04 .newslist { display: grid; grid-template-columns: repeat(3, 1fr); gap:30px; }
main .section04 .newslist > div { flex:1; min-width:0; }
main .section04 .newslist img { }
main .section04 .newslist h3 { font-size: 24px; margin: 25px 0 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
main .section04 .newslist span { font-size: 17px; font-weight: bold; background: #000; border-radius: 99px; padding: 5px 10px;}
main .section04 .newslist .def span  { color: #FFFFFF}
main .section04 .newslist .blog span  { color: #3CF14E}
main .section04 .newslist .thumb { overflow:hidden; width:100%; border-radius: 7px}
main .section04 .newslist .thumb img { display:block; width:100%; transition:transform .4s ease; object-fit: cover;transform: scale(1);aspect-ratio: 16 / 10;}
main .section04 .newslist a:hover .thumb img { transform:scale(1.1); }


.more_bt {text-align: center; display: block;}
.more_bt a { width: 24%; display: inline-block; text-align: center; border-radius: 99px; background: #202020; padding: 14px; color: #fff; font-size: 19px; font-weight: bold;}
.more_bt a:hover { color:#F9BD00 }



@media (max-width: 1600px){
    main .section02 { padding:100px 20px}
    main .section01 .swiper-pagination { left: 54%}
    main .section01 .swiper-slide .txt { top: 100px}
    main .section01 .swiper-slide .txt h3 { font-size: 56px}
    main .section01 .swiper-pagination { left: 54%; bottom: 190px}
}


@media (max-width: 1440px){

}

@media (max-width: 1380px){
    main .section01 .swiper-slide .txt { top: 180px}
    main .section01 .swiper-slide .txt h3 { font-size: 52px}
    main .section02 .product_list .probox h3 { font-size: 23px}
    main .section02 .product_list .probox span { font-size: 18px}
    main .section04 .newslist { gap:20px }
    main .section03 .ahead { padding: 0 20px}
}

@media (max-width: 1280px){
    main .section01 .swiper-pagination { left: 54%; bottom: 160px}
    main .section01 .swiper-slide .txt { top: 180px}
    main .section02 { padding: 80px 20px}
    main .section02 .product_list .probox .pr_img { height: 300px}
    main .section03 { padding: 100px 20px;}
    main .section03 .ahead { padding: 0}
    main .section03 .ahead h2 {  font-size: 56px}
    main .section03 .ahead p { font-size: 24px; margin-bottom: 60px;}
    main .section03 .ahlink a { padding: 40px 30px 120px;}
    main .section03 .ahlink a span { font-size: 26px}
    main .section04 { padding: 100px 20px; }
    main .section02 .product_list .probox .pr_img img {}
}

@media (max-width: 1024px){

    main .section01 .swiper-slide .txt {padding: 0 30px;}
    main .section01 .swiper-slide .txt h3 { font-size: 42px; word-break: keep-all;}
    main .section01 .swiper-slide .txt em { font-size: 24px}

    main .section02 .product_list{   grid-template-columns: repeat(2, 1fr); /* 2개 */ gap: 32px 24px;  }
    main .section02 h2 { font-size: 40px;margin-bottom: 40px;}
    main .section02 .product_list .probox h3 { margin-top: 10px; font-size: 20px}
    main .section02 .product_list .probox span { margin-top: 5px; font-size: 17px}
    main .section02 .product_tap {margin-bottom: 40px}
    main .section02 .product_tap ul {gap: 10px;}
    main .section02 .product_tap ul li a {padding: 15px 25px;font-size: 17px;}
    main .section02 .product_list .probox .pr_img img {aspect-ratio: 16 / 12; height: 100%}

    main .section03 .ahead h2 { font-size: 40px; }
    main .section03 .ahead p { font-size: 20px;word-break: keep-all;}
    main .section03 .ahlink {flex-wrap: wrap; }
    main .section03 .ahlink a { padding: 30px 20px 100px; flex: auto; width: 48%;}
    main .section03 .ahlink a span { font-size: 24px}
    main .section03 .ahlink a i { width: 40px;  height: 40px;}
    main .section03 .ahlink a em { width: 40px; height: 40px; bottom: 20px; right: 24px}
    main .section03 .ahlink a:hover em { bottom: 40px; }
    main .section04 h2 { font-size: 40px; margin-bottom: 40px;}
    main .section04 .newslist h3 { font-size: 18px;}
    .more_bt a { width: 34%; font-size: 16px; }
}


@media (max-width: 768px){
    main .section01{ position:relative; height:740px; }
    main .section01 .swiper-slide .txt {padding: 0 20px; top:110px;}
    main .section01 .swiper-slide .txt h3 { font-size: 31px; }
    main .section01 .swiper-slide .txt:last-child h3 br { display: none; }
    main .section01 .swiper-slide .txt em { font-size: 19px}
    main .section01 .swiper-slide .txt .t2 a { font-size: 16px}
    main .section01 .swiper-pagination { position: relative;bottom: 170px;}
    main .section02 { padding: 60px 20px}
    main .section02 h2 { font-size: 34px; margin-bottom: 30px;}
    main .section02 .product_list{ gap: 10px; margin-bottom: 40px;}
    main .section02 .product_list .probox h3 { font-size: 17px}
    main .section02 .product_list .probox span { font-size: 14px;}
    main .section02 .product_list .probox .pr_img { height: auto; padding: 12px}
    .more_bt a { width: 100%; font-size: 16px; }
    main .section02 .product_tap {margin-bottom: 40px}
    main .section02 .product_tap ul {flex-wrap: wrap;}
    main .section02 .product_tap ul li {width: 31%;}
    main .section02 .product_tap ul li a {padding: 10px 0;font-size: 16px;width: 100%;position: relative;display: block;text-align: center;}
    main .section02 .product_list .probox .pr_img img {height: auto;}


    main .section04 .newslist { gap:30px; grid-template-columns: repeat(1, 1fr); }
    main .section04 .newslist h3 {  margin: 10px 0 5px; font-size: 16px}
    main .section04 .newslist span { font-size: 15px}
    main .section02 .product_list .probox .pr_img em { font-size: 13px;bottom: 7px; right: 7px; padding: 2px 5px;}
    main .section03 .ahlink a {  width: 46%;}
    main .section03 .ahlink a span { margin-top: 24px; font-size: 20px}
    main .section03 .ahead h2 { margin-bottom: 30px}
    main .section03 .ahead p { font-size: 18px; margin-bottom: 60px;}
    main .section04 { padding: 60px 20px}
    main .section04 h2 { font-size: 34px; margin-bottom: 30px;}
    header .sh-link a { display: none;}
}


@media (max-width: 420px){
main .section01 .swiper-slide .txt h3 br {  display: none;}
}
}