@charset "utf-8";
/*메인 스와이프*/
.mainSwiper {position: relative;}
.mainSwiper .main-slide-item{height: 100vh;background-size: cover;background-position: center;}
.mainSwiper .main-slide-item video{width: 100%;height: 100%;pointer-events: none;object-fit: cover;}
.mainSwiper .main-slide-item .bg-dim{position: absolute;background-color: rgba(0,0,0,0.2); width:100%; height:100%; top:0; left:0; pointer-events:none; }
.mainSwiper .company-slogan {width:100%; position:absolute; font-family:'Noto Sans KR', Verdana, sans-serif; top:calc(50% - 40px); left:50%; transform: translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; row-gap:30px; height:400px; justify-content:flex-end; }
.mainSwiper .global-slogan {width:100%; position:absolute; font-family:'Noto Sans KR', Verdana, sans-serif; top:calc(50% - 160px); left:50%; transform: translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; row-gap:30px; height:640px; justify-content:flex-end; }
.mainSwiper .logo-slogan {width:100%; position:absolute; font-family:'Noto Sans KR', Verdana, sans-serif; top:calc(50% - 40px); left:50%; transform: translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; row-gap:30px; height:400px; justify-content:flex-end; }
/*.mainSwiper .logo-slogan {width:100%; position:absolute; font-family:'Noto Sans KR', Verdana, sans-serif; top:calc(50% - 0px); left:50%; transform: translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; row-gap:30px; height:400px; justify-content:flex-end; }*/
.mainSwiper .company-slogan .slogan, .mainSwiper .logo-slogan .slogan {font-size:68px; line-height:1.2; font-weight:700; letter-spacing:-0.05em; color:#ffffff; opacity:0; transition-duration:0.6s; transition-delay:0.5s; transform:translateY(10px);}
.mainSwiper .global-slogan .slogan {font-size:32px; line-height:1.2; font-weight:500; letter-spacing:-0.05em; color:#ffffff; opacity:0; transition-duration:0.5s; transition-delay:0.5s; transform:translateY(10px);}
.mainSwiper .company-slogan .text, .mainSwiper .logo-slogan .text {font-size:32px; font-weight:500; letter-spacing:-0.05em; padding-top:4px; line-height:1.4; color:#ffffff; opacity:0; transition-duration:0.6s; transition-delay:0.8s; transform:translateY(10px);}
.mainSwiper .global-slogan .text {font-size:32px; font-weight:500; letter-spacing:-0.05em; padding-top:40px; line-height:1.4; color:#ffffff; opacity:0; transition-duration:0.8s; transition-delay:0.8s; transform:translateY(10px);}
.mainSwiper .company-slogan .round-box { display:block; text-align:center; width:100%; padding-top:46px; opacity:0; transition-duration:0.6s; transition-delay:1.2s; transform:translateY(10px); }
.mainSwiper .global-slogan .round-box { display:block; text-align:center; width:100%; padding-top:260px; opacity:0; transition-duration:0.5s; transition-delay:0.8s; transform:translateY(10px); }
.mainSwiper .logo-slogan .round-box { display:block; text-align:center; width:100%; padding-top:36px; opacity:0; transition-duration:0.6s; transition-delay:1.6s; transform:translateY(10px); }
/*.mainSwiper .company-slogan .round-text, .mainSwiper .logo-slogan .round-text { display:inline-block; font-size:22px; font-weight:600; letter-spacing:-0.05em; color:#ffffff; padding:17px 32px 20px 32px; border:1px solid rgba(255,255,255,0.3); transition: all 0.3s ease-in-out; -webkit-border-radius:32px; -moz-border-radius:32px; border-radius:32px; }*/
.mainSwiper .company-slogan .round-text, .mainSwiper .logo-slogan .round-text { display:inline-block; font-size:22px; font-weight:600; letter-spacing:-0.05em; color:#ffffff; background:#df0011; border:1px solid #df0011; padding:17px 32px 20px 32px; transition: all 0.3s ease-in-out; -webkit-border-radius:32px; -moz-border-radius:32px; border-radius:32px; }
.mainSwiper .company-slogan .round-text:hover, .mainSwiper .logo-slogan .round-text:hover { color:#ffffff; background:#0e2589; border:1px solid #0e2589; }
.mainSwiper .global-slogan .round-text { display:inline-block; font-size:22px; font-weight:600; letter-spacing:-0.05em; color:#ffffff; background:#df0011; border:1px solid #df0011; padding:17px 32px 20px 32px; transition: all 0.3s ease-in-out; -webkit-border-radius:32px; -moz-border-radius:32px; border-radius:32px; }
.mainSwiper .global-slogan .round-text:hover { color:#ffffff; background:#0e2589; border:1px solid #0e2589; }
.mainSwiper .company-slogan .logo-box, .mainSwiper .logo-slogan .logo-box, .mainSwiper .global-slogan .logo-box {opacity:0; transition-duration:0.6s; transition-delay:1.2s;transform: translateY(10px); margin-top:10px; margin-bottom:20px;}

.mainSwiper .company-slogan a, .mainSwiper .logo-slogan a, .mainSwiper .global-slogan a { font-size:22px; font-weight:600; letter-spacing:-0.05em; color:#ffffff; }
.mainSwiper .company-slogan a:hover, .mainSwiper .logo-slogan a:hover, .mainSwiper .global-slogan a:hover { font-size:22px; font-weight:600; letter-spacing:-0.05em; color:#ffffff; }

.mainSwiper .swiper-pagination {position: absolute;left: 50%; bottom:140px; transform: translate(-50%, -50%);}
.mainSwiper .swiper-pagination .swiper-pagination-bullet {width:16px; height:16px; background-color:rgba(255,255,255,1);opacity: 1;border-radius:25px; transition-duration:0.3s; margin:3px;}
.mainSwiper .swiper-pagination .swiper-pagination-bullet-active {background-color:#df0011; width:30px;}

.mainSwiper  .scroll_bar {position:fixed; z-index:1; left:50%; bottom:0; transform:translateX(-50%); text-align:center; transition:all 0.5s ease-in-out;}
.mainSwiper  .scroll_bar p {font-size:16px; font-weight:500; letter-spacing:0.02em; color:#fff; padding-bottom:12px;}
.mainSwiper  .scroll_bar .bar {display: block;position: relative;width: 1px;height: 80px;background: rgba(255, 255, 255, 0.2);margin: 0 auto;overflow: hidden;}
.mainSwiper  .scroll_bar .bar::after {content: '';width: 1px;height: 80px;position: absolute;left: 0;transform: translate3d(0, -100%, 0);background: #fff;animation: barAnimation cubic-bezier(0.65, 0, 0.35, 1) 2s infinite;}

/*.mainSwiper .company-slogan .slogan br {display: none;}*/
.mainSwiper .logo-slogan .slogan br {display: none;}
.mainSwiper .company-slogan .slogan {padding-bottom:20px;}
.mainSwiper .global-slogan .slogan {padding-bottom:20px;}

@keyframes barAnimation {
    0% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
    90% {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
    100% {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}

.mainSwiper .swiper-slide-active .company-slogan .slogan, .mainSwiper .swiper-slide-active .logo-slogan .slogan, .mainSwiper .swiper-slide-active .global-slogan .slogan {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .text, .mainSwiper .swiper-slide-active .logo-slogan .text, .mainSwiper .swiper-slide-active .global-slogan .text {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .round-box, .mainSwiper .swiper-slide-active .logo-slogan .round-box, .mainSwiper .swiper-slide-active .global-slogan .round-box {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .round-text, .mainSwiper .swiper-slide-active .logo-slogan .round-text, .mainSwiper .swiper-slide-active .global-slogan .round-text {opacity: 1;transform: translateY(0);}
.mainSwiper .swiper-slide-active .company-slogan .logo-box, .mainSwiper .swiper-slide-active .logo-slogan .logo-box, .mainSwiper .swiper-slide-active .global-slogan .logo-box {opacity: 1;transform: translateY(0);}

.mainSwiper .swiper-buttons{position:absolute; width:150px; right:calc(((100% - 1800px) / 2)); bottom:100px;transform: translateX(-40px);z-index: 1;}
.mainSwiper .swiper-buttons .swiper-button-prev{background-image: url("/image/main/visual/left-arrow.png");background-size: cover;width: 47px;height: 18px;}
.mainSwiper .swiper-buttons .swiper-button-prev::after{content:none;}
.mainSwiper .swiper-buttons .swiper-button-next{background-image: url("/image/main/visual/right-arrow.png");background-size: cover;width: 47px;height: 18px;}
.mainSwiper .swiper-buttons .swiper-button-next::after{content:none;}

@media screen and (max-width:640px){
    .mainSwiper .company-slogan {top:calc(50% - 140px); left:50%; row-gap:20px; height:560px;}
    .mainSwiper .global-slogan {top:calc(50% - 140px); left:50%; row-gap:20px; height:560px;}
    .mainSwiper .logo-slogan {top:calc(50% - 140px); left:50%; row-gap:20px; height:560px;}
    .mainSwiper .company-slogan .logo-box > img.logo-ksp, .mainSwiper .logo-slogan .logo-box > img.ksp_logo, .mainSwiper .global-slogan .logo-box > img.ksp_logo {width:50%;}
    .mainSwiper .company-slogan .logo-box > img.logo-ksp, .mainSwiper .logo-slogan .logo-box > img.logo-ksp, .mainSwiper .global-slogan .logo-box > img.logo-ksp {width:90%;}
    .mainSwiper .company-slogan .logo-box > img.logo-flag, .mainSwiper .logo-slogan .logo-box > img.logo-flag, .mainSwiper .global-slogan .logo-box > img.logo-flag {width:60%;}
    .mainSwiper .company-slogan .slogan, .mainSwiper .logo-slogan .slogan, .mainSwiper .global-slogan .slogan {font-size:36px; padding:0 30px; line-height:1.3;}
    .mainSwiper .company-slogan .text, .mainSwiper .logo-slogan .text, .mainSwiper .global-slogan .text {font-size:14px; padding:4px 30px 0 30px; font-weight:500; line-height:1.4;}
    .mainSwiper .company-slogan .round-box, .mainSwiper .logo-slogan .round-box, .mainSwiper .global-slogan .round-box { padding-top:40px; }
    .mainSwiper .company-slogan .round-text, .mainSwiper .logo-slogan .round-text, .mainSwiper .global-slogan .round-text { font-size:14px; padding:14px 22px 17px 22px; }
    
    .mainSwiper .swiper-pagination {bottom:100px; display:none;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet {width: 14px;height: 14px;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet-active {width: 24px;}
    .mainSwiper .swiper-buttons {position: absolute;width: 150px;right: 50%;bottom: 180px;transform: translateX(50%);z-index: 1;}
    .mainSwiper .swiper-buttons {display:none;}
    
    .mainSwiper .company-slogan .slogan br {display:block;}
    .mainSwiper .global-slogan .slogan br {display:block;}
    .mainSwiper .logo-slogan .slogan br {display:block;}
}

@media screen and (max-width:420px){
    .mainSwiper .company-slogan {top:calc(50% - 140px); left:50%; row-gap:20px; height:560px;}
    .mainSwiper .global-slogan {top:calc(50% - 140px); left:50%; row-gap:20px; height:560px;}
    .mainSwiper .logo-slogan {top:calc(50% - 140px); left:50%; row-gap:20px; height:560px;}
    .mainSwiper .company-slogan .slogan, .mainSwiper .logo-slogan .slogan {font-size:24px; padding:0 30px;}
    .mainSwiper .global-slogan .slogan {font-size:24px; padding:0 30px;}
    .mainSwiper .swiper-pagination {top:calc(50% + 180px); display:none;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet {width: 14px;height: 14px;}
    .mainSwiper .swiper-pagination .swiper-pagination-bullet-active {width: 24px;}
}



.section .wrap_{width: 1600px; margin: auto;}
.section *{font-family:'Noto Sans KR', Verdana, sans-serif; font-weight: 400; line-height: 1; color:#000;}
.section .m1660{display: none;}
.section .m1280{display: none;}
.section .m640{display: none;}

@media screen and (max-width:1660px){
    .section .wrap_{width: 100%; padding-left:30px; padding-right: 30px;}
    .section .m1660{display: block;}
    .section .m1280{display: none;}
    .section .m640{display: none;}
}
@media screen and (max-width:1280px){
    .section .wrap_{padding-left:20px; padding-right: 20px;}
    .section .m1660{display: none;}
    .section .m1280{display: block;}
    .section .m640{display: none;}
}
@media screen and (max-width:640px){
    .section .wrap_{padding-left:15px; padding-right: 15px;}
    .section .m1660{display: none;}
    .section .m1280{display: none;}
    .section .m640{display: block;}
}

.section-3{padding-bottom: 107px;}
.section-3 .ti {margin-top: 114px; margin-bottom:20px; display: block; text-align: center;}
.section-3 .ti strong {font-family:'Noto Sans KR', Verdana, sans-serif; font-size:48px; line-height:48px; color:#0a1e59; font-weight:700; display: block; text-align: center;}
.section-3 .ti span {font-family:'Noto Sans KR', Verdana, sans-serif; font-size: 14px; line-height: 14px; color:#999; padding: 13px 0 25px; display: block;}

.section-3 .banner .slick-track{display: flex; justify-content: center;}
.section-3 .banner .slick-slide{margin: 0 25px;}
.section-3 .banner .box{text-align: center;}
.section-3 .banner .box .img-box{display: flex; align-items: center; justify-content: center; border-radius: 16px; transition: 0.5s; overflow: hidden; background:#000000; width:500px;}
.section-3 .banner .box .img-box .bg{transition: 0.5s; width: 100%;}
.section-3 .banner .box .img-box .icon{position: absolute;}
.section-3 .banner .box > em{padding-top:40px; font-family:'Noto Sans KR', Verdana, sans-serif; font-size:28px; color: #000044; line-height:30px; font-weight: 700; font-style: normal; display: block;}
.section-3 .banner .box > span{padding-top:10px; font-size: 14px; line-height: 14px; color: #999; letter-spacing: -0.05em; display: block;}
.section-3 .banner .box:hover .img-box{ border-radius: 16px; }
.section-3 .banner .box:hover .bg{transform: scale(1.1); opacity: 1.0;}

@media screen and (min-width:641px){
    .section-3 .banner .slick-track{width: auto !important; transform: none !important;}
}
@media screen and (max-width:1660px){
    .section-3 .banner .slick-slide{width: calc(33.333% - 40px);}
    .section-3 .banner .box .img-box,
    .section-3 .banner .box .img-box .bg{width: 100%;}
    .section-3 .banner li > em{padding-top: 30px;}
}
@media screen and (max-width:1280px){
    .section-3{padding-bottom: 90px;}
    .section-3 .wrap_{padding: 0 10px;}
    .section-3 .ti{margin-top: 110px;}
    .section-3 .ti strong{font-size: 36px; line-height: 36px;}
    .section-3 .ti span{font-size: 14px; line-height: 14px; padding: 13px 0 25px;}
    .section-3 .banner .slick-slide{margin: 0 10px; width: calc(33.333% - 2vw);}
    .section-3 .banner .box:hover .img-box{box-shadow: rgba(0,0,0,0.3) 5px 5px 5px;}
    .section-3 .banner .box > em{padding-top: 35px; font-size: 22px; line-height: 22px;}
    .section-3 .banner .box > span{padding-top: 10px; font-size: 18px; line-height: 18px;}
}
@media screen and (max-width:1000px){
    .section-3 .banner .box > em{font-size: 18px; line-height: 20px;}
    .section-3 .banner .box > span{font-size: 16px; line-height: 16px;}
}
@media screen and (max-width:800px){
    .section-3 .banner .box .img-box .icon{transform: scale(0.7);}
}
@media screen and (max-width:640px){
    .section-3{padding-bottom: 70px;}
    .section-3 .wrap_{padding: 0;}
    .section-3 .banner .slick-slide{margin: 0 20px; width: 440px;}
    .section-3 .banner .box .img-box .icon{transform: scale(1);}
    .section-3 .banner .box .img-box:hover{box-shadow: rgba(0,0,0,0.3) 10px 10px 10px;}
    .section-3 .banner li > em{padding-top: 40px; font-size: 20px; line-height: 20px;}
    .section-3 .banner li > span{font-size: 16px; line-height: 16px;}
}
@media screen and (max-width:480px){
    .section-3 .banner .slick-slide{margin: 0 10px; width: 320px;}
}
@media screen and (max-width:400px){
    .section-3 .banner .slick-slide{margin: 0 10px; width: 280px;}
}

.section-4{background:#f4f4f4; overflow: hidden; padding-bottom: 160px; z-index: 1;}
.section-4 .txt{padding:90px 0 32px; font-size: 56px; line-height:78px; color: #262626; font-weight:400; letter-spacing:-0.03em;}
.section-4 .txt span{font-weight:700;}
.section-4 .tab{display: flex; justify-content: flex-start;}
.section-4 .tab li{padding:20px 26px 23px 26px; font-size:18px; line-height:18px; font-weight:500; color:#000; transition: 0.3s; margin-right:15px; cursor:pointer; border-radius:30px; background:#e5e5e5;}
.section-4 .tab li.select,
.section-4 .tab li:hover{background:#0a1e59; color:#fff;}
.section-4 .banner{margin-top:60px; overflow: visible;}
.section-4 .banner .slick-list{overflow: visible;}
.section-4 .banner .slick-slide{margin-right: 40px;}
.section-4 .banner .box{float: left; overflow: hidden; position: relative; border-radius: 40px;}
.section-4 .banner .box > img{transition: 0.3s;}
.section-4 .banner .box:hover > img{transform: scale(1.1);}
.section-4 .banner .box > em{position: absolute; top:calc(50% + 30px); left: calc(50% + 20px); font-size: 72px; font-style: normal; font-weight: 700; color:#fff;}
.section-4 .banner .box > span{position: absolute; top:calc(50% + 125px); left: calc(50% + 20px); font-size: 16px; line-height: 24px; font-weight: 500; color:#fff; padding-right: 20px; word-break: keep-all;}
.section-4 .banner .box > span br{display: none;}

@media screen and (max-width:1660px){
    .section-4 .banner .box > img{width: 80vw;}
    .section-4 .banner .box > em{top:50%; left: 50%; font-size: 60px;}
    .section-4 .banner .box > span{position: absolute; top:calc(50% + 80px); left:50%; }
}
@media screen and (max-width:1280px){
    .section-4{padding-bottom: 260px;}
    .section-4 .txt{padding: 115px 0 28px; font-size: 40px; line-height: 52px;}
    .section-4 .tab{display: flex; justify-content: flex-start;}
    .section-4 .tab li{padding: 25px 33px; font-size: 16px; line-height: 16px; margin-right: 14px; border-radius: 40px;}
    .section-4 .banner{margin-top: 70px;}
    .section-4 .banner .slick-slide{margin-right: 40px;}
    .section-4 .banner .box{border-radius: 40px;}
    .section-4 .banner .box > img{width: calc(100vw - 57px);}
    .section-4 .banner .box > em{top:calc(50% + 25px); left: calc(50% + 20px); font-size: 44px;}
    .section-4 .banner .box > span{position: absolute; top:calc(50% + 90px); left: calc(50% + 20px); font-size: 16px; line-height: 24px; letter-spacing: -0.05em;}
}
@media screen and (max-width:1100px){
    .section-4 .banner .box > em{top:calc(50% + 20px);}
    .section-4 .banner .box > span{top:calc(50% + 75px);}
}
@media screen and (max-width:1000px){
    .section-4 .banner .box > em{top:50%;}
    .section-4 .banner .box > span{top:calc(50% + 50px);}
}
@media screen and (max-width:900px){
    .section-4 .txt{ word-break: keep-all;}
    .section-4 .txt br{display: none;}
    .section-4 .banner .box > em{top:calc(50% - 30px);}
    .section-4 .banner .box > span{top:calc(50% + 30px);}
}
@media screen and (max-width:780px){
    .section-4 .banner .box > em{top:calc(50% - 50px); font-size: 32px;}
    .section-4 .banner .box > span{top:50%; font-size: 15px; line-height: 22px;}
}
@media screen and (max-width:640px){
    .section-4{padding-bottom:80px;}
    .section-4 .txt{padding:80px 0 20px; font-size:26px; line-height:30px; letter-spacing:-0.03em;}
    .section-4 .tab li{padding:10px 16px 12px 16px; font-size:13px; line-height:14px; margin-right:8px; border-radius:20px; letter-spacing:-0.03em;}
    .section-4 .banner{margin-top:30px; }
    .section-4 .banner .slick-slide{margin-right: 30px; width: calc(100vw - 30px);}
    .section-4 .banner .box{border-radius: 36px; height: 320px; overflow: hidden;}
    .section-4 .banner .box > img{width: auto; height: 100%;}
    .section-4 .banner .box > em{top:calc(50% + 30px); left:20px; font-size:28px;}
    .section-4 .banner .box > span{top:calc(50% + 70px); left:22px; font-size:14px; line-height:20px;}
}

.section-5{clear: both; background:#091c54 url(/image/main/section5_bg.jpg) no-repeat center 0; padding:80px 0 170px; z-index: 10;}
.section-5 .txtbg{position: absolute; left:calc(50% - 827px); top:-142px; font-size: 168px; line-height: 1; color: #8ba0d3; font-weight: 700; letter-spacing: -0.05em;}
.section-5 .ti{display: block; padding: 70px 0 80px; font-size: 48px; color:#fff; font-weight: 600; text-align: center; width: 100%; background: url(/image/main/section5_tibg.png) no-repeat center 0;}
.section-5 .list{display: flex; flex-wrap: wrap;}
.section-5 .list li{position: relative; width: 750px;}
.section-5 .list li:nth-child(even){margin-left: 70px; margin-top: 200px;}
.section-5 .list li.ready .img{width: 1px; opacity: 0;}
.section-5 .list li .img{width: 632px; margin-left: 105px; transition:0.5s; opacity: 1; overflow: hidden; box-shadow: rgba(0,0,0,0.3) 5px 5px 20px;}
.section-5 .list li.ready .txt{left: -50px; opacity: 0;}
.section-5 .list li .txt{position: absolute; left: 10px; top:100px; transition: 0.7s; opacity: 1;}
.section-5 .list li .txt > em{font-size: 30px; font-weight: 500; font-style: normal; color:#fff; display: block; height: 40px;}
.section-5 .list li .txt > span{font-size: 18px; font-weight: 500; color:#fff;}
.section-5 .list li > a:hover .txt{transform: translateY(-10px);text-shadow: 3px 4px 5px rgba(0,0,0,0.6);}

@media screen and (max-width:1660px){
    .section-5 .txtbg{left:1.6vw; top:-8.2vw; font-size: 9.7vw;}
    .section-5 .list li{width:50%;}
    .section-5 .list li:nth-child(even){margin-left: 0; margin-top: 150px;}
    .section-5 .list li .img{width:calc(100% - 150px); margin-left: 90px;}
    .section-5 .list li .img img{width: calc(50vw - 150px);}
    .section-5 .list li.ready .txt{left: -50px;}
    .section-5 .list li .txt{left: 10px; top:100px;}
    .section-5 .list li .txt > em{font-size: 30px; height: 40px;}
    .section-5 .list li .txt > span{font-size: 18px;}
}
@media screen and (max-width:1280px){
    .section-5{padding:80px 0 170px;}
    .section-5 .ti{padding:80px 0 80px; font-size: 48px;}
    .section-5 .list li:nth-child(even){margin-top: 150px;}
    .section-5 .list li .img{width:calc(100% - 150px); margin-left: 90px;}
    .section-5 .list li .img img{width: calc(50vw - 150px);}
    .section-5 .list li.ready .txt{left: -50px;}
    .section-5 .list li .txt{left: 1px; top:80px;}
    .section-5 .list li .txt > em{font-size: 24px; height: 34px;}
    .section-5 .list li .txt > span{font-size: 14px;}
}
@media screen and (max-width:1000px){
    .section-5 .list li .img{width:calc(100% - 120px);}
    .section-5 .list li .img > img{width: calc(50vw - 120px);}
}
@media screen and (max-width:800px){
    .section-5{padding:80px 0 120px;}
    .section-5 .list{display: block;}

    .section-5 .list li{position: relative; width: 100%; margin-top: 80px;display: flex;}
    .section-5 .list li:first-child{margin-top: 0;}

    .section-5 .list li > a{width:100%;display: block;position: relative;}
    .section-5 .list li .img img{width: calc(100vw - 85px);margin: 0;}
    .section-5 .list li .img{width: 100%;margin: 0;}
    .section-5 .list li.ready .img{width: 1px; height:100%;opacity: 0;}
    .section-5 .list li.ready .txt{left: -50px;}
    .section-5 .list li .txt{left: 10px; top:135px;}
    .section-5 .list li .txt > em{font-size: 26px; height: 36px;}
    .section-5 .list li .txt > span{font-size: 16px;}

    .section-5 .list li:nth-child(even){justify-content: flex-end;margin-top: 80px;transform: translateX(15px);}
    .section-5 .list li:nth-child(even) > a {padding-left: 55px;}
    .section-5 .list li:nth-child(odd) > a {padding-right: 55px;}
    .section-5 .list li:nth-child(odd).ready .txt {left: auto;right: -50px;}
    .section-5 .list li:nth-child(odd) .txt {left: auto;right: 10px;}

}
@media screen and (max-width:640px){
    .section-5 .ti{padding:70px 0 80px; font-size:36px; }
    .section-5 .list li .txt { top: 30%; }
}
/*
@media screen and (max-width:480px){
    .section-5{padding: 50px 0 60px;}
    .section-5 .ti { padding: 60px 0 40px; font-size: 36px; }
    .section-5 .list li:nth-child(even),
    .section-5 .list li{ margin-top: 50px;}
    .section-5 .list li .txt > span{font-weight: 300;}
}
@media screen and (max-width:420px){
    .section-5 .list li .txt > em{font-size: 22px; height: 30px;}
    .section-5 .list li .txt > span{font-size: 14px;}
}
*/

.section-6{ padding-bottom: 155px; overflow: hidden;}
.section-6 .whitebg{position: absolute; width: 100%; height: 100%; background: #fff; top:0; right:calc(50% + 800px); z-index: 2;}
.section-6 .ti{padding-top: 140px; text-align: center;}
.section-6 .ti > strong {font-size:48px; font-weight:700; color:#da0f47; }
.section-6 .ti > strong > span{color:#c01249;}
.section-6 .ti > p {padding-top: 30px; font-size:24px; line-height:1.4; font-weight:400; color: #1c1c1c;}
.section-6 .product{padding-top: 30px; position: relative; z-index: 1;}
.section-6 .product .txt{position: absolute; z-index: 2; width: 310px;height: 100%; overflow: visible; background: #fff; padding-top: 95px;left: 0;padding-left: 30px;}
.section-6 .product .txt > strong{font-size: 28px; line-height: 1em; font-weight: 700; color:#000; display: flex; align-items: center;}
.section-6 .product .txt > strong > span{width: 15px; height: 15px; border-radius: 10px; background: #d21818; margin-right: 18px;}
.section-6 .product .txt > .txt_navi{padding-top: 20px;}
.section-6 .product .txt > .txt_navi .txt-title{font-size: 58px; line-height: 58px; font-weight: 700; font-style: normal; color:#000; white-space: nowrap; overflow: visible;}
.section-6 .product .txt > .txt_navi .txt-info{margin-top: 50px; height: 160px; font-size: 20px; line-height: 1.4; color: #5d5d5d;}
.section-6 .product .txt > .txt_navi > a{background: #fff; padding-right: 10px;display: flex;align-items: center;margin-top:8px;}
.section-6 .product .txt > .txt_navi > a::after{content:'';display: block;width:100px;background-color: #000000;height: 2px;margin-left: 10px;}
.section-6 .product .txt > .txt_navi > a:hover{}
.section-6 .product .txt > .arrow_bu{padding-top: 40px;width: 200px;}
.section-6 .product .txt > .arrow_bu > button{background:#fff url(/image/main/section6_icon_arrow1.png) no-repeat center center; width: 80px; height: 80px; border: 1px #b4b4b4 solid; transition: 0.2s background-color;}
.section-6 .product .txt > .arrow_bu > button:hover{background-image: url(/image/main/section6_icon_arrow2.png); background-color: #df0011; border: 1px #df0011 solid;}
.section-6 .product .txt > .arrow_bu > .prev{margin-right: 4px;}
.section-6 .product .txt > .arrow_bu > .next{transform: rotateY(180deg);}

.section-6 .product .swiper-item img{transition-duration: 0.3s;transition-property: all;width:100%; display: block; width:394px; height:335px; }
.section-6 .product .productSwiper{overflow: visible;padding:40px 0 40px 310px;min-width: 1600px;}
.section-6 .product .productSwiper-list{display: flex;align-items: center;height: 490px;}
.section-6 .product .swiper-item {transition-duration: 0.4s;transition-property: all;}
.section-6 .product .swiper-item > a {width: 100%;height: 100%;display: flex;align-items: center;}
.section-6 .product .swiper-item.swiper-slide-active {margin:0 240px 0 60px !important; transform: scale(1); width:580px; }
.section-6 .product .swiper-item.swiper-slide-active img {max-width:580px; max-height:490px; width:580px; height:490px;}

.section-6 .product .product-pagination{top:auto;bottom:0;width: calc(100% - 500px);left: 370px;}
.section-6 .product .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #d21818;}

@media screen and (max-width:1600px){
    .section-6 .whitebg{display: none;}
    .section-6 .product .product-pagination {
        width: calc(100vw - 500px);
    }
}

@media screen and (max-width:1280px){
    .section-6 .ti > p {font-size: 36px;}

}

@media screen and (max-width:1024px){
    .section-6 .ti > strong {font-size: 42px}
    .section-6 .ti > p {font-size: 28px;}
    .section-6 .product {padding-top: 30px;display: flex;flex-direction: column-reverse;}
    .section-6 .product .txt {position: relative;width: 100%;height: auto;padding-top: 40px;padding-left: 0;}
    .section-6 .product .txt > .txt_navi .txt-info {margin-top: 50px;height: auto;font-size: 14px;}
    .section-6 .product .txt > .txt_navi .txt-info br{display: none;}
    .section-6 .product .txt > .txt_navi > a {display: none;}
    
    .section-6 .product .swiper-item img{width:100%; height:100%; }
    .section-6 .product .productSwiper{width: 100%;min-width: auto;padding: 40px 0;}
    .section-6 .product .productSwiper-list {height: auto;}
    .section-6 .product .swiper-item.swiper-slide-active {margin:0 40px 0 0 !important;transform: scale(1); width:100%;}
    .section-6 .product .swiper-item.swiper-slide-active img {width:100%; height:100%;}
    .section-6 .product .product-pagination {width:100%; left:0;}
}

@media screen and (max-width:650px) {
    .section-6 {padding:80px 0 100px;}
    .section-6 .ti > strong {font-size:32px}
    .section-6 .ti > p {font-size:14px; padding:20px 20px 0px; letter-spacing:-0.03em;}
    .section-6 .ti > p > br{display: none;}
    .section-6 .product {padding-top: 0;}
    
    .section-6 .product .txt {height:auto; padding-top:0px; text-align:right;}
    .section-6 .product .txt > .txt_navi .txt-info {margin-top:0px;height:auto;}
    .section-6 .product .txt > .txt_navi .txt-info br{display: none;}
    .section-6 .product .txt > .txt_navi > a {display: none;}
    
    .section-6 .product .productSwiper{width: 100%; min-width: auto; padding:40px 0 20px;}
    .section-6 .product .swiper-item.swiper-slide-active {margin: 0 20px 0 0px !important;}
    
    .section-6 .ti {padding-top: 0;}
    .section-6 .product .txt > strong {font-size: 22px;}
    .section-6 .product .txt > strong > span {width:10px; height:10px; margin-right: 9px;}
    .section-6 .product .txt > .txt_navi .txt-title {font-size: 32px; line-height:1em; display:none;}
    .section-6 .product .txt > .txt_navi .txt-info {margin-top: 20px; height:auto; font-size:14px; display:none;}
    
    .section-6 .product .txt > .arrow_bu {padding-top:4px; width:100%;}
    .section-6 .product .txt > .arrow_bu > button {background-size: 8px auto;width: 50px;height: 50px;}
}

.section-7{clear: both; background: url(/image/main/section7_bg.gif) no-repeat center 0; overflow: hidden; padding: 107px 0 145px; position: relative;}
.section-7 .movie_bg{position: absolute; top:0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.section-7 .movie_bg .bg-dim{position: absolute;background-color: rgba(0,0,0,0.2);width: 100%;height: 100%;top:0;left: 0;pointer-events: none;}
.section-7 .movie_bg video{width: 100%; height: 100%; object-fit: cover;}
.section-7 .ti{position: relative; display: flex; flex-direction: column; align-items: center;}
.section-7 .ti > span{color:#8f8f8f; font-size: 15px; line-height: 15px; font-weight: 500; padding: 25px 0 28px; border-top: 1px #bd9b48 solid; width: 80px; overflow: visible; white-space: nowrap; display: flex; justify-content: center;}
.section-7 .ti > strong{color:#fff; font-size: 42px; line-height: 42px; font-weight: 700;}
.section-7 .ti > p{color:#fff; font-size: 28px; line-height: 24px; padding: 20px 0 60px;}
.section-7 .list{}
.section-7 .list ul{display: flex; flex-wrap: wrap;}
.section-7 .list li{width: 16.666%; height: 270px; position: relative; border: 1px #fff solid;}
.section-7 .list li > a{position:absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;}
.section-7 .list li > a:hover{background: #18263a;}
.section-7 .list li > a > .icon{height: 137px; display: flex; align-items: center;}
.section-7 .list li > a > .icon > img{margin-top: 10px;}
.section-7 .list li > a > .icon > img:last-child{display: none;}
.section-7 .list li > a:hover > .icon > img:first-child{display: none;}
.section-7 .list li > a:hover > .icon > img:last-child{display: block;}
.section-7 .list li > a > .line{background: rgba(255,255,255,0.3); width: 30px; height: 1px;}
.section-7 .list li > a > em{font-size: 26px; color:#fff; font-weight: 500; padding: 25px 0 22px; font-style: normal;}
.section-7 .list li > a:hover > em{color:#00b0ec;}
.section-7 .list li > a > span{font-size: 16px; color:#fff; opacity: 0.8;}

@media screen and (max-width:1280px){
    .section-7{background-size: auto 100%; padding: 107px 0 105px;}
    .section-7 .ti > span{font-size: 15px; line-height: 15px; padding: 25px 0 28px; width: 80px;}
    .section-7 .ti > strong{font-size: 42px; line-height: 42px;}
    .section-7 .ti > p{font-size: 22px; line-height: 24px; padding: 28px 0 60px;}
    .section-7 .list li{width: 25%; height: 310px;}
    .section-7 .list li > a > .icon{height: 157px;}
    .section-7 .list li > a > .icon > img{margin-top: 20px;}
    .section-7 .list li > a > .line{width: 34px;}
    .section-7 .list li > a > em{font-size: 30px; padding: 27px 0 26px;}
    .section-7 .list li > a > span{font-size: 18px;}
}
@media screen and (max-width:1000px){
    .section-7 .list li{height: 280px;}
    .section-7 .list li > a > em{font-size: 22px;}
    .section-7 .list li > a > span{font-size: 16px;}
}
@media screen and (max-width:800px){
    .section-7 .list li{height: 260px;}
    .section-7 .list li > a > .icon{height: 120px;}
    .section-7 .list li > a > .icon > img{margin-top: 10px;}
    .section-7 .list li > a > em{font-size: 22px;}
    .section-7 .list li > a > span{font-size: 15px;}
}
@media screen and (max-width:640px){
    .section-7{padding: 107px 0 84px;}
    .section-7 .ti > span{font-size: 14px; line-height: 14px; padding: 22px 0 22px;}
    .section-7 .ti > p{font-size: 18px; line-height: 18px; padding: 24px 0 57px;}
    .section-7 .list li{width: 33.33%; height: 203px;}
    .section-7 .list li > a > .icon{height: 100px;}
    .section-7 .list li > a > .icon > img{margin-top: 15px; height: 30px;}
    .section-7 .list li > a > .line{width: 23px;}
    .section-7 .list li > a > em{padding: 15px 0 16px;}
    .section-7 .list li > a > span{font-size: 14px;}
}
@media screen and (max-width:480px){
    .section-7 .list li > a > em{font-size: 18px;}
}
@media screen and (max-width:440px){
    .section-7 .ti > p{font-size: 14px; line-height: 14px; padding: 20px 0 30px;}
    .section-7 .list li{height: 160px;}
    .section-7 .list li > a > .icon{height: 70px;}
    .section-7 .list li > a > em{font-size: 16px;}
    .section-7 .list li > a > span{font-size: 13px;}
}


.section-8{background: url(/image/main/section8_bg.png) no-repeat calc(50% + 918px) 0; padding:105px 0 70px 0;}
.section-8 .ti{font-size: 32px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; color:#212121; text-align: center;}
.section-8 .banner{margin-top: 40px;}
.section-8 .banner > div{display: flex; justify-content: center;}
.section-8 .banner > div .box{display: flex; align-items: center; position: relative;overflow: hidden;}
.section-8 .banner > div .box::before{content:'';width: 100%;height: 100%;display: block;background-color: rgba(0,0,0,0.3);position: absolute;z-index: 1;opacity: 0;transition-duration: 0.3s;}
.section-8 .banner > div .box > img{transition-duration: 0.6s;}
.section-8 .banner > div .box .txt{position: absolute; display: flex; flex-direction: column; align-items: flex-start; left: 50px;transition-duration: 0.3s;z-index: 2;}
.section-8 .banner > div .box .txt > em{font-size: 44px; line-height: 44px; font-weight: 700; font-style: normal; color:#fff; letter-spacing: -0.025em;}
.section-8 .banner > div .box .txt > span{font-size: 18px; line-height: 18px; color:#fff; letter-spacing: -0.075em; margin-top: 15px; padding-left: 3px;}
.section-8 .banner a:hover .box::before{opacity: 1;}
.section-8 .banner a:hover .box img{transform: scale(1.2);box-shadow: rgba(0,0,0,0.3) 5px 5px 5px;}
.section-8 .banner a:hover .box .txt{transform: translateY(-10px);text-shadow: 3px 4px 5px rgba(0,0,0,0.6);}


@media screen and (max-width:1520px){
    .section-8{background-position:calc(50% + 750px) 0;}
    .section-8 .banner > div .box > img{width: 100%;}
    .section-8 .banner > div .box .txt{left: 30px;}
}
@media screen and (max-width:1280px){
    .section-8{background-position:calc(50% + 568px) 0; padding: 145px 0 0;}
    .section-8 .wrap_{padding: 0;}
    .section-8 .ti{font-size: 32px; line-height: 32px;}
    .section-8 .banner{margin-top: 55px;}
    .section-8 .banner > div .box .txt{left: 45px;}
    .section-8 .banner > div .box .txt > em{font-size: 39px; line-height: 39px; letter-spacing: -0.05em;}
    .section-8 .banner > div .box .txt > span{font-size: 16px; line-height: 16px; margin-top: 16px; padding-left: 3px;}
}
@media screen and (max-width:640px){
    .section-8{padding: 105px 0 0;}
    .section-8 .banner{margin-top: 50px;}
    .section-8 .banner > div .box .txt{left: 40px;}
    .section-8 .banner > div:nth-child(2) .box .txt{left: 20px;}
    .section-8 .banner > div .box .txt > em{font-size: 28px; line-height: 28px;}
    .section-8 .banner > div .box .txt > span{font-size: 14px; line-height: 14px; margin-top: 8px;}
    .section-8 .banner > div:nth-child(2) .box .txt > em{font-size: 20px; line-height: 20px;}
    .section-8 .banner > div:nth-child(2) .box .txt > span{margin-top: 4px;}
}
@media screen and (max-width:480px){
    .section-8 .banner > div{flex-direction: column;}
    .section-8 .banner > div .box{height: 50vw;}
    .section-8 .banner > div .box img{width: 100%; height: 100%; object-fit: cover;}
    .section-8 .banner > div .box .txt{justify-content: center; align-items: center; left: 0 !important; top: 0; width: 100%; height: 100%;}
    .section-8 .banner > div:nth-child(2) .box .txt > em{font-size: 28px; line-height: 28px;}
    .section-8 .banner > div:nth-child(2) .box .txt > span{margin-top: 8px;}
}
@media screen and (max-width:440px){
    .section-8 .banner > div .box .txt > em { font-size: 16px; line-height: 16px; font-weight: 500; }
}


.section-9{padding: 25px 0 95px 0;}
.section-9 .ti{font-size: 36px; line-height: 36px; font-weight: 500; letter-spacing: -0.025em; color:#212121; text-align: center;}
.section-9 .logo{margin-top: 45px;}
.section-9 .logo ul{display: flex; justify-content: flex-start; flex-wrap: wrap; width:100%; max-width:1440px; margin:auto; gap:20px; padding:0 10px;}
.section-9 .logo li{border:1px #d9e0e5 solid; width: calc((100% - 60px) / 4); height:140px; overflow: hidden; display:flex; align-items: center; justify-content: center;border-radius: 15px;padding:10px;}

.section-9 .logo li > img {max-width: 100%;}

@media screen and (max-width:1800px){
    .section-9 .logo li{width: calc((100% - 60px) / 4);}
}

@media screen and (max-width:1280px){
    .section-9{padding: 95px 0 110px;}
    .section-9 .ti{font-size: 32px; line-height: 32px; letter-spacing: 0;}
    .section-9 .logo li{width: calc((100% - 40px) / 3);}

}

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

    .section-9 .logo li{width: calc((100% - 20px) / 2);}
}

@media screen and (max-width:640px){
    .section-9{padding: 95px 0 80px;}
    .section-9 .logo ul{padding:0 20px;}
    .section-9 .logo li{height: 100px; padding: 0 20px}
    .section-9 .logo li > img {height: 27px;width: auto;}
}

@media screen and (max-width:420px){
    .section-9 .logo ul{gap:10px; padding:0 20px;}
    .section-9 .logo li{height: 80px; padding: 0 10px}
    .section-9 .logo li > img {height: 20px;width: auto;}
}


.section-10{background: url(/image/main/section10_bg.gif) no-repeat center 0;background-size: cover;}
.section-10 .wrap_{height: 300px; display: flex; align-items: center; justify-content: space-between; padding: 0 150px;}
.section-10 .ti{color:#fff; font-size: 28px; font-weight: 900; letter-spacing: 0.075em; border-top: 1px #fff solid; padding-top: 8px;}
.section-10 .tel{display: flex; flex-direction: column; align-items: center;}
.section-10 .tel strong{color:#fff; font-size: 54px; font-weight: 500; line-height: 54px;}
.section-10 .tel span{color:#fff; font-size: 17px; font-weight: 700; letter-spacing: 0.1em; line-height: 17px; margin-top: 17px;}
.section-10 .bu > a{color:#fff; font-size: 18px; font-weight: 700; letter-spacing: -0.06em; display: flex; align-items: center; justify-content:left; width: 220px; height: 55px; padding-left:24px; padding-right:40px; background: url(/image/main/section10_icon_arrow.png) no-repeat calc(100% - 28px) center; border: 1px #fff solid; transition: 0.3s;}
.section-10 .bu > a:hover{background-position:calc(100% - 15px) center;}

@media screen and (max-width:1660px){
    .section-10 .wrap_{padding: 0 100px;}
}
@media screen and (max-width:1440px){
    .section-10 .wrap_{padding: 0 80px;}
}
@media screen and (max-width:1280px){
    .section-10 .wrap_{height: 300px; padding: 0 60px;}
    .section-10 .ti{font-size: 28px; padding-top: 8px;}
    .section-10 .tel strong{font-size: 54px; line-height: 54px;}
    .section-10 .tel span{font-size: 17px; line-height: 17px; margin-top: 17px;}
    .section-10 .bu > a{font-size: 18px; width: 220px; height: 55px; padding-right: 40px; background-position: calc(100% - 28px) center;}
    .section-10 .bu > a:hover{background-position:calc(100% - 15px) center;}
}
@media screen and (max-width:1000px){
    .section-10 .wrap_{height: 450px; padding:66px 0 60px; flex-direction: column;}
    .section-10 .tel strong{font-size:42px; line-height: 42px;}
    .section-10 .tel span{margin-top: 20px;}
}
@media screen and (max-width:640px){
    .section-10 .wrap_{height: 350px; padding:66px 0 60px; flex-direction: column;}
    .section-10 .tel strong{font-size:42px; line-height: 42px;}
    .section-10 .tel span{margin-top: 14px;}
}
@media screen and (max-width:480px){
    .section-10 .wrap_ { height: 300px; padding: 30px 0; }
    .section-10 .ti{font-size: 22px;}
    .section-10 .tel strong{font-size: 36px; line-height: 36px;}
    .section-10 .tel span{font-size: 14px; line-height: 14px; margin-top: 10px;}
    .section-10 .bu > a{font-size: 14px; width: 200px; height: 40px; padding-right: 30px;}
}