@charset "UTF-8";

.hd_num{background: var(--color); display: flex; justify-content: center; gap: 0px 20px; height: 47px; align-items: center;}
.hd_num h2{font-family: 'SUIT', sans-serif; color: #fff; font-size: 2.4rem; font-weight: bold;}
.hd_num a{background: #fff; border-radius: 17px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 0px 7px; padding: 0px 17px; color: var(--color); font-family: var(--su); font-weight: 800; }

.visual{height: 950px; margin-top: 135px; background: url("../img/visual.png")no-repeat; background-size: cover; background-position: center;}
.visual .width2{height: 100%; display: flex; align-items: center; }
.visual .vtxt{padding-left: 4%; padding-bottom: 130px;}
.visual .vtxt h2{font-family: var(--su); color: var(--color); font-size: 3.0rem; font-weight: 600; line-height: 135%; margin-bottom: 25px;}
.visual .vtxt h3{font-family: var(--su); font-size: 5.2rem; font-weight: 800; color: var(--color); margin-bottom: 4px;}
.visual .vtxt h4{font-family: var(--su); font-size: 5.2rem; font-weight: 800; color: #5887ef;}
.visual .vtxt .word{font-weight: 800;}
.visual .latest{position: absolute; width: 100%; bottom: 48px; border-radius: 8px; border: 1px solid #e2e2e2; background: #fff; padding: 15px 40px;}

.visual h3.motion .char{display: inline-block; animation: slide-right 0.4s cubic-bezier(.5,0,.5,1) both; animation-delay: calc(100ms * var(--char-index)); font-weight: 800; }
.visual h4.motion .char{display: inline-block; animation: slide-right 0.4s cubic-bezier(.5,0,.5,1) both; animation-delay: calc(100ms * var(--char-index)); font-weight: 800; }
@keyframes slide-right {
    0%   { transform: translateX(30px); opacity: 0; }
    30%  { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}


.m1{background: #f7f7f7;}
.m1 .txt{margin-bottom: 75px;}
.m1 .txt h2{font-size: 4.2rem; line-height: 140%; font-weight: 800;text-align: center; color: #333;}
.m1 .txt h2 b{color: var(--color); font-weight: 800;}
.m1 .box_wrap{display: flex; gap: 15px 2%;}
.m1 .box_wrap .box{width: 33%; border-radius: 12px; border: 1px solid var(--color); padding: 35px 5px; text-align: center; background: #fff; box-shadow: 0px 0px 15px rgba(26,83,208,0.13);}
.m1 .box_wrap .box h2{font-size: 2.4rem; font-weight: 800; color: var(--color); margin: 15px 0 20px 0;}
.m1 .box_wrap .box p{color: #494949; font-weight: 500; font-size: 1.8rem; line-height: 140%;}

.m2 .box_wrap{display: flex; align-items: center; justify-content: space-between;}
.m2 .box_wrap:nth-child(2n){flex-direction: row-reverse; margin-top: 200px;}
.m2 .box_wrap:nth-child(3){margin-top: 200px;}
.m2 .box_wrap .img{width: 50%;}
.m2 .box_wrap .img img{width: 100%;}
.m2 .box_wrap .text pre{font-size: 2.2rem; font-weight: bold; color: var(--color); margin-bottom: 20px;}
.m2 .box_wrap .text h2{font-size: 4.5rem; font-weight: 800; color: #333; line-height: 130%; margin-bottom: 40px;}
.m2 .box_wrap .text a{padding: 15px 35px; background: var(--color); font-size: 2.0rem; font-weight: 800; color: #fff; border-radius: 30px; border: 1px solid var(--color); transition: 0.3s all;}
.m2 .box_wrap .text a span{margin-left: 10px; font-weight: 800;}
.m2 .box_wrap .text a:hover{background: #fff; color: var(--color); }

.m3{background: url("../img/m3-bg.png")no-repeat; background-position: center; background-size: cover; background-attachment: fixed; text-align: center;}
.m3 h2{color: #fff; font-size: 4.2rem; font-weight: bold; margin-bottom: 40px;}
.m3 .m3_btn{display: flex; align-items: center; gap: 0px 10px; justify-content: center;}
.m3 .m3_btn a{width: 195px; height: 54px; background: var(--color); border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 2.0rem; font-weight: 500; color: #fff;}

.m4{position: relative;}
.m4 .txt, .m5 .txt{text-align: center; margin-bottom: 75px;}
.m4 .txt h2, .m5 .txt h2, .p1 .txt h2{font-size: 4.8rem; font-weight: 800; color: #333; margin-bottom: 22px;}
.m4 .txt h2 b, .m5 .txt h2 b, .p1 .txt h2 b{font-weight: 800; color: var(--color);}
.m4 .txt p, .m5 .txt p, .p1 .txt p{font-size: 1.8rem; font-weight: 500; color: #333;}
.m4 .swiper-slide{display: flex; gap: 0px 2%;}
.m4 .swiper-slide .img{width: 50%; position: relative; border-radius: 10px; overflow: hidden;}
.m4 .swiper-slide .img img{width: 100%;}
.m4 .swiper-slide .img span{position: absolute; top: 0; left: 30px; width: 116px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 10px 10px; background: var(--color); font-size: 2.0rem; font-weight: 800; color: #fff;}
.m4 .m4-prev{position: absolute; left: -10%; top: 60%; cursor: pointer;}
.m4 .m4-next{position: absolute; right: -10%; top: 60%; cursor: pointer;}
.m4 .m4-next img{width: 52px;}

.bx-wrapper{margin-bottom: 0px; box-shadow: none; border: none; max-width: initial !important; width: 100%; background: var(--color); padding: 15px 0;}
.banner li{font-size: 3.8rem; font-weight: bold; color: #fff; white-space: nowrap; text-transform: uppercase; width: initial !important; font-family: "Montserrat", sans-serif;}
.banner{background: var(--color);}

.m5 .box_wrap{display: flex; border-radius:12px; overflow: hidden;}
.m5 .box_wrap .img{background: url("../img/m5-bg.png") no-repeat; background-size: cover; background-position: center; width: 50%; display: flex; align-items: center; justify-content: center; text-align: center;}
.m5 .box_wrap .img h3{font-size: 4.8rem; font-weight: 800; color: #fff;}
.m5 .box_wrap .img p{font-size: 2.4rem; font-weight: 500; color: #fff; line-height: 130%; border: 1px solid #fff; display: inline-block; padding: 20px 0; width: 412px;}
.m5 .box_wrap .latest{width: 50%;}

#ft{background: #0f172a;}
#ft .footer{display: flex; gap: 30px 15%;}
#ft .footer .ft_lo{display: flex; flex-direction: column; align-items: flex-start;}
#ft .footer .ft_lo .foot_logo{display: inline-block; margin-bottom: 17px;}
#ft .footer .ft_lo .ft_ser{display: inline-block; font-weight: 300; color: rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.6);}
#ft .footer .foot_info ul{display: flex; align-items: center; flex-wrap: wrap; gap: 0px 10px; color: rgba(255,255,255,0.6); font-weight: 500;}
#ft .footer .foot_info ul li{color: rgba(255,255,255,0.6); font-weight: 500; line-height: 160%;}
#ft .footer .foot_info ul a{color: rgba(255,255,255,0.6); font-weight: 500; line-height: 160%;}
#ft .footer .foot_info ul span{color: rgba(255,255,255,0.6); font-weight: 500; line-height: 160%;}
#ft .footer .foot_info p{margin-top: 25px; color: rgba(255,255,255,0.6);  text-align: left;}

.p1{padding-bottom: 0px;}
.p1 .txt{text-align: center; margin-bottom: 70px;}
.pro_wrap .pro_menu{width: 92%; max-width: 1450px; margin: 0 auto 0 auto; display: flex; align-items: center; justify-content: center; gap: 0px 1%; }
.pro_wrap .pro_menu.pro_menu_fixed{position: fixed; top: 137px; text-align: center; left: 0; right: 0; margin: 0 auto; z-index: 99; background: #fff;}
.pro_wrap .pro_menu.pro_menu_fixed:after{content: ''; width: 300%; height: 100%; background: #fff; left: -100%; bottom: 0; position: absolute; z-index: -1;}
.pro_wrap .pro_menu li{width: 20%; background: #f4f4f4; border-radius: 12px; height: 110px; text-align: center; display: flex; flex-direction: column; gap: 10px 0; align-items: center; justify-content: center;}
.pro_wrap .pro_menu li a{display: block; width: 100%; height: 100%;display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pro_wrap .pro_menu li .h3{font-size: 1.7rem; font-weight: 500; color: #666; display: block; margin-bottom: 6px;}
.pro_wrap .pro_menu li .h2{font-size: 1.9rem; font-weight: bold; color: #333;}
.pro_wrap .pro_menu li.on{background: var(--color);}
.pro_wrap .pro_menu li.on .h3{color: #fff;}
.pro_wrap .pro_menu li.on .h2{color: #fff;}
.pro_wrap .pro_bg{padding: 135px 0; color: #fff;}
.pro_wrap .pro_bg h2{font-size: 4.5rem; font-weight: 800; margin-bottom: 38px;}
.pro_wrap .pro_bg h3{font-size: 2.2rem; font-weight: bold; margin-bottom: 12px;}
.pro_wrap .pro_bg p{font-size: 1.8rem; font-weight: 500; line-height: 140%;}
.pro_wrap .pro_box1{margin-top: 135px;}
.pbox1{padding-top: 0px;}
.pro_wrap .pro_bg1{background: url("../img/p1-bg1.png") no-repeat; background-position: center; background-size: cover;}
.pro_wrap .pro_bg2{background: url("../img/p1-bg2.png") no-repeat; background-position: center; background-size: cover;}
.pro_wrap .pro_bg3{background: url("../img/p1-bg3.png") no-repeat; background-position: center; background-size: cover;}
.pro_wrap .pro_bg4{background: url("../img/p1-bg4.png") no-repeat; background-position: center; background-size: cover;}
.pro_wrap .pro_bg5{background: url("../img/p1-bg5.png") no-repeat; background-position: center; background-size: cover;}
.pro_wrap .pro_box .box_wrap1{display: flex; gap: 25px 4%; justify-content: space-between; align-items: center; margin-top: 140px;}
.pro_wrap .pro_box .box_wrap1 .img{width: 50%;}
.pro_wrap .pro_box .box_wrap1 .img img{width: 100%;}
.pro_wrap .pro_box .box_wrap1 .text pre{font-size: 2.2rem; font-weight: bold; color: #9a9a9a; text-transform: uppercase; margin-bottom: 20px;}
.pro_wrap .pro_box .box_wrap1 .text h2{font-size: 3.8rem; font-weight: 800; color: #333; line-height: 130%; margin-bottom: 25px;}
.pro_wrap .pro_box .box_wrap1 .text h2 b{font-weight: 800; color: var(--color);}
.pro_wrap .pro_box .box_wrap1 .text p{font-size: 1.8rem; font-weight: 500; color: #333; line-height: 145%; }
.pro_wrap .pro_box .box_wrap1 .tbox{background: #f7f7f7; border-radius: 12px; padding: 25px 35px 25px 25px; width: fit-content; margin-top: 35px;}
.pro_wrap .pro_box .box_wrap1 .tbox dl{display: flex; gap: 0px 5px;}
.pro_wrap .pro_box .box_wrap1 .tbox dd{font-size: 2.0rem; font-weight: 600; color: #333; line-height: 140%;}
.pro_wrap .pro_box .box_wrap1 .tbox2 dd{font-size: 1.6rem;}
.pro_wrap .pro_box .box_wrap1 .tbox2{display: flex; align-items: flex-start; flex-direction: column; gap: 10px 0;}
.pro_wrap .pbox2{margin-top: 250px; margin-bottom: 110px;}
.pro_wrap .pbox2 .txt{margin-bottom: 85px;}
.pro_wrap .pbox2 .txt h2{font-size: 4.5rem; margin-bottom: 0px;}
.pro_wrap .pbox2 .txt p{font-size: 2.2rem; margin-top: 15px;}
.pro_wrap .pbox2 .box_wrap{display: flex; gap: 27px 2%; flex-wrap: wrap;}
.pro_wrap .pbox2 .box_wrap .box{width: 32%; text-align: center;}
.pro_wrap .pbox2 .box_wrap .box img{width: 100%;}
.pro_wrap .pbox2 .box_wrap .box p{font-size: 2.2rem; font-weight: 600; color: #333; margin-top: 20px;}


@media all and (max-width: 1400px){
    .visual .latest{padding: 10px 25px;}
    #formmail-write .form_logo{margin-right: 35px;}
    #formmail-write .form_logo img{width: 120px;}
    #formmail-write .applybtn{width: 170px;}
}
@media all and (max-width: 1200px){
    .pro_wrap .pro_menu li .h3{font-size: 1.2rem;}
    .pro_wrap .pro_menu li .h2{font-size: 1.7rem;}
}
@media all and (max-width: 1024px){
    .visual{margin-top: 60px; height: 750px;}
    .visual .vtxt{padding-left: 0px}
    .visual .vtxt h2{font-size: 2.4rem; margin-bottom: 15px;}
    .visual .vtxt h3{font-size: 4.2rem;}
    .visual .vtxt h4{font-size: 4.2rem;}
    .m1 .txt h2{font-size: 3.6rem;}
    .m1 .txt{margin-bottom: 45px;}
    .m2 .box_wrap .text pre{font-size: 1.8rem; margin-bottom: 10px;}
    .m2 .box_wrap .text h2{font-size: 3.0rem;}
    .m2 .box_wrap .text a{font-size: 1.6rem; padding: 10px 25px;}
    .m3 h2{font-size: 3.4rem; margin-bottom: 25px;}
    .m3 .m3_btn a{width: 130px; height: 42px;}
    #formmail-write .form-body{flex-direction: column; gap: 10px 0; width: 100%;}
    #formmail-write{flex-direction: column; gap: 8px 0;}
    .m1 .box_wrap .box h2{font-size: 2.0rem;}
    .m1 .box_wrap .box p{font-size: 1.6rem;}
    .m2 .box_wrap:nth-child(2n){margin-top: 80px;}
    .m2 .box_wrap:nth-child(3){margin-top: 80px;}
    .m4 .m4-prev{left: -3%; z-index: 9;background: #fff; border-radius: 50%;}
    .m4 .m4-next{right: -3%; z-index: 9; background: #fff; border-radius: 50%;}
    .m4 .txt h2, .m5 .txt h2, .p1 .txt h2{font-size: 3.4rem; margin-bottom: 10px;}
    /*.m4 .txt p, .m5 .txt p, .p1 .txt p{font-size: 1.6rem;}*/
    .m4 .swiper-slide .img span{width: 90px; height: 34px; font-size: 1.6rem;}
    .bx-wrapper{padding: 10px 0;}
    .banner li{font-size: 2.6rem;}
    .sub_visual .sub_top_text{padding-top: 40px;}
    .sub_visual .sub_top_text h3{font-size: 3.2rem;}
    .sub_visual .sub_top_text p{margin-top: 7px;}
    .pro_wrap .pro_menu.pro_menu_fixed{top: 60px;}
    .pro_wrap .pro_menu.pro_menu_fixed{width: 100%; gap: 0px; flex-wrap: wrap;}
    .pro_wrap .pro_menu.pro_menu_fixed li{height: initial; width: 33.333%; border-radius: 0px; flex-grow: 1;}
    .pro_wrap .pro_menu.pro_menu_fixed li a{padding: 10px 0; height: 60px; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;}
    .pro_wrap .pro_bg{padding: 70px 0;}
    .pro_wrap .pro_box .box_wrap1{margin-top: 90px;}
    .pro_wrap .pro_box .box_wrap1 .text{width: 48%;}
    .pro_wrap .pro_box .box_wrap1 .text pre{font-size: 1.8rem; margin-bottom: 10px;}
    .pro_wrap .pro_box .box_wrap1 .text h2{font-size: 3.0rem; margin-bottom: 15px;}
    .pro_wrap .pro_box .box_wrap1 .text p{font-size: 1.6rem;}
    .pro_wrap .pro_box .box_wrap1 .text p br{display: none;}
    .pro_wrap .pbox2{margin-top: 120px; margin-bottom: 80px;}
    .pro_wrap .pbox2 .txt h2{font-size: 3.4rem;}
    .pro_wrap .pbox2 .txt p{font-size: 1.8rem; margin-top: 10px;}
    .pro_wrap .pbox2 .txt{margin-bottom: 45px}
    .pro_wrap .pbox2 .box_wrap .box p{font-size: 1.8rem; margin-top: 10px;}
}
@media all and (max-width: 900px){
    .m5 .box_wrap{flex-direction: column;}
    .m5 .box_wrap .img{width: 100%; padding: 80px 0;}
    .m5 .box_wrap .latest{width: 100%;}
    .m5 .box_wrap .img img{width: 170px;}
    .m5 .box_wrap .img h3{font-size: 3.4rem;}
    .m5 .box_wrap .img p{padding: 20px 35px; width: initial; margin-top: 20px; font-size: 1.8rem;}
    #formmail-write2{padding: 20px 20px;}
    #formmail-write2 .form-group .h3{font-size: 1.6rem; min-width: 75px;}
    #formmail-write2 .form-group6 .input_box input{width: 120px;}
    .pro_wrap .pro_bg h2{font-size: 3.4rem; margin-bottom: 15px;}
    .pro_wrap .pro_bg h3{font-size: 1.9rem; margin-bottom: 8px;}
    .pro_wrap .pro_bg p{font-size: 1.6rem;}
}
@media all and (max-width: 850px){
    .pro_wrap .pro_box1{margin-top: 90px;}
    .pro_wrap .pro_menu li .h3{display: none;}
    .pro_wrap .pro_menu li{height: initial;}
    .pro_wrap .pro_menu li a{height: 60px;}
    .pro_wrap .pro_menu{flex-wrap: wrap; gap: 10px 1%;}
    .pro_wrap .pro_menu li{width: 32%; flex-grow: 1;}
    .pro_wrap .pro_menu li .h2{font-size: 1.6rem; letter-spacing: -0.06em}
}
@media all and (max-width: 768px){
    .visual .vtxt h3{font-size: 3.0rem;}
    .visual .vtxt h4{font-size: 3.0rem;}
    /*.visual{height: initial; padding-top: 80px; padding-bottom: 70px;}*/
    .visual{height: 560px;}
    .visual .latest{position: initial; padding: 20px; display: none}
    .visual .width2{flex-direction: column; gap: 50px 0; justify-content: center; align-items: flex-start;}
    .visual .vtxt{padding-bottom: 0px;}
    #formmail-write .privacy{margin-left: 0px; width: 100%;}
    #formmail-write .applybtn{margin-left: 0px; width: 100%;}
    #formmail-write .form-footer{width: 100%;}
    #formmail-write .form-group{gap: 8px 0; flex-direction: column;}
    #formmail-write .form-group .box_wrap{width: 100%;}
    .m1 .box_wrap{flex-direction: column;}
    .m1 .box_wrap .box{width: 100%;}
    .m1 .txt h2{font-size: 2.8rem;}
    .m2 .box_wrap{flex-direction: column-reverse; gap: 25px 0;}
    .m2 .box_wrap .img{width: 100%;}
    .m2 .box_wrap .text{width: 100%;}
    .m2 .box_wrap:nth-child(2n){flex-direction: column-reverse; gap: 25px 0;}
    .m2 .box_wrap .text h2{font-size: 2.4rem;}
    .m3 h2{font-size: 2.6rem;}
    .m3{background-attachment: initial;}
    .m3 .m3_btn a{font-size: 1.6rem;}
    .m4 .txt h2, .m5 .txt h2, .p1 .txt h2{font-size: 2.8rem;}
    .m4 .swiper-slide{flex-direction: column; gap: 12px 0;}
    .m4 .swiper-slide .img{width: 100%;}
    .m4 .m4-prev img{width: 40px;}
    .m4 .m4-next img{width: 40px;}
    .pro_wrap .pro_bg h2{font-size: 2.8rem;}
    .pro_wrap .pro_bg h3{font-size: 1.7rem;}
    .pro_wrap .pro_box .box_wrap1{flex-direction: column-reverse;}
    .pro_wrap .pro_box .box_wrap1 .img{width: 100%;}
    .pro_wrap .pro_box .box_wrap1 .text{width: 100%;}
    .pro_wrap .pro_box .box_wrap1 .tbox dd{font-size: 1.8rem;}
    .pro_wrap .pro_box .box_wrap1 .text h2{font-size: 2.6rem;}
    .pro_wrap .pro_box .box_wrap1 .tbox dd{font-size: 1.6rem;}
    .pro_wrap .pbox2 .box_wrap .box{width: 49%;}
    .pro_wrap .pbox2 .txt h2{font-size: 2.8rem;}
}
@media all and (max-width: 650px){
    #ft .footer{flex-direction: column;}
    #ft .footer .foot_info ul{flex-direction: column; align-items: flex-start;}
    #ft .footer .foot_info ul span{display: none;}
}