/* main slide img start */
.main-slide-img .swiper-container {width: 100%; height: 456px; background: #fff;}
.main-slide-img .swiper-slide {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack:center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; /* -webkit-align-items: center; */ /* align-items: center; */}
.main-slide-img .swiper-slide h2 {font-size: 1.3rem; line-height: 38px; font-weight: 300; color: #fff; margin-bottom: 30px;}
.main-slide-img .swiper-slide h2 b {font-size: 2.5rem;}
.img0 {background: url(../img/index/mainSlide0.png) no-repeat; height: 417px; background-size: cover; background-position: center top; height: auto !important; max-height: none !important; min-height: 0 !important;}
.img1 {background: url(../img/index/mainSlide1.webp) no-repeat; height: 417px; background-size: cover; background-position: center top; height: auto !important; max-height: none !important; min-height: 0 !important;}
.img2 {background: url(../img/index/mainSlide2.png) no-repeat; height: 417px; background-size: cover; background-position: center top; height: auto !important; max-height: none !important; min-height: 0 !important;}
.img3 {background: url(../img/index/mainSlide3.png) no-repeat; height: 417px; background-size: cover; background-position: center top; height: auto !important; max-height: none !important; min-height: 0 !important;}
.img4 {background: url(../img/index/mainSlide4.png) no-repeat; height: 417px; background-size: cover; background-position: center top; height: auto !important; max-height: none !important; min-height: 0 !important;}

.swiper-slide .box {display: flex; flex-wrap: wrap; align-items: center; text-align: center;}
.swiper-progress-bar {position: relative; display: block; z-index: 1; height: 2px;}
.swiper-progress-bar .slide_progress-bar {position: absolute; height: 3px; background: transparent; width: auto; clear: both; opacity: 0; bottom: -1px; left: 0; right: 0;}
.swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background: linear-gradient( to left, #ff6a00, 30%, transparent ); height: 100%; width: 0; content: "";}
.swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear; transition-delay: unset; width: 100%; transition-duration: 20s;}
.main-slide-img {position: relative;}
.main-slide-img .btn-box a {color: #fff;}
.swiper-pagination-bullet {width: 90px; height: 3px; border-radius: 0; background: #fff; opacity: 0.5;}
.swiper-pagination-bullet-active {background: #ff6a00; opacity: 1;}
.swiper-button-next {width: 120px; border-radius: 50px; background: rgb(255, 255, 255, 0.2); color: #fff; transition: all 200ms ease; font-weight: 700; border: 3px solid rgb(255, 255, 255, 0.2);}
.swiper-button-next:hover {background: #fff; color: #000;}
.swiper-button-prev {width: 50px; border-radius: 50px; background: none; color: #fff;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {font-size: 16px; margin-left: 40px;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {font-size: 16px;}
.page-nav-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 10;}

.new-img {position: absolute; top: 40px; right: -40px; z-index: 0;}
.video-lay {width: 560px; height: 250px;}
.video-lay img {width: 100%;}
/* main slide img end */
.marL {margin-left: auto;}
.layout .article .box .text {font-size: 1.156rem; font-weight: 300; padding: 20px 0 30px; text-align: justify; line-height: 32px;}
.layout .article .box .text ul li {display: flex; line-height: 1; margin: 16px 0;}
.layout .article .box .text ul li span {flex: 1;}
.layout .article .box .text i {background: #ff6a00; width: 6px; height: 6px; margin: 6px 6px 0 0;}
.layout .article .box .text2 {font-size: 1rem; font-weight: 300; line-height: 32px; background: #232f3e; border-radius: 6px; border-left: 6px solid #ff6a00; padding: 12px 20px; color: #c7d1dd;}

.api {display: flex; position: relative;}
.api > .box {width: 1100px; margin: 0 auto; padding: 70px 0; display: flex; flex-direction: column;}
.api > .box > .layout {display: flex; flex-wrap: wrap; margin-top: 30px; align-items: center;}
.api > .box > .layout .figure.right {order: 2; padding: 32px 0;}
.api > .box > .layout .img {background: url(../img/index/api_img.png) no-repeat; background-position: center center; width: 100%; height: 332px;}
.api > .box > .layout .article {display: flex; flex: 1;}
.api > .box > .layout .article .box {display: flex; flex-direction: column; flex: 1;}
.api > .box > .layout .article .box .logo {background: url(../img/index/kuipernet_api.png) no-repeat; width: 209px; height: 37px;}

.api .layout .article .box .text {padding: 20px 0 30px; text-align: justify; line-height: 32px;}
.api .layout .article .box .text ul {display: grid; gap: 24px; grid-auto-rows: auto; grid-template-columns: repeat(12, 1fr); padding: 32px 0;}
.api .layout .article .box .text ul li {display: flex; line-height: 1; grid-area: span 1 / span 6 / auto / auto; margin: 0;}
.api .layout .article .box .text ul li span {flex: 1;}
.api .layout .article .box .text i {background: #ff6a00; width: 6px; height: 6px; margin: 6px 6px 0 0;}


.software-waf {background: linear-gradient( to top, #fff, #f7f7ff ); display: flex; position: relative;}
.software-waf > .box {width: 1100px; margin: 0 auto; padding: 70px 0; display: flex; flex-direction: column;}
.software-waf > .box > .layout {display: flex; flex-wrap: wrap; margin-top: 30px; align-items: center;}
.software-waf > .box > .layout .img {background: url(../img/index/software_img.webp) no-repeat; background-position: center center; width: 500px; height: 321px;}
.software-waf > .box > .layout .article {display: flex; flex: 1; padding-left: 90px;}
.software-waf > .box > .layout .article .box {display: flex; flex-direction: column;}
.software-waf > .box > .layout .article .box .logo {background: url(../img/index/kuipernet.webp) no-repeat; width: 141px; height: 38px;}
.proxy-waf {background: #fff; display: flex; position: relative;}
.proxy-waf > .box {width: 1100px; margin: 0 auto; padding: 70px 0; display: flex; flex-direction: column;}
.proxy-waf > .box > .layout {display: flex; flex-wrap: wrap; margin-top: 30px; align-items: center;}
.proxy-waf > .box > .layout .figure.right {order: 2;}
.proxy-waf > .box > .layout .img {background: url(../img/index/proxy_img.webp) no-repeat; background-position: center center; width: 500px; height: 308px;}
.proxy-waf > .box > .layout .article {display: flex; flex: 1; padding-right: 90px;}
.proxy-waf > .box > .layout .article .box {display: flex; flex-direction: column;}
.proxy-waf > .box > .layout .article .box .logo {background: url(../img/index/kuipernet_cloud.webp) no-repeat; width: 194px; height: 37px;}
.appliance-waf-inline {background: linear-gradient( to top, #f7f7ff , #fff); display: flex; position: relative;}
.appliance-waf-inline > .box {width: 1100px; margin: 0 auto; padding: 70px 0; display: flex; flex-direction: column;}
.appliance-waf-inline > .box > .layout {display: flex; flex-wrap: wrap; margin-top: 30px; align-items: center;}
.appliance-waf-inline > .box > .layout .img {background: url(../img/index/appliance_img.webp) no-repeat; background-position: center center; width: 570px; height: 395px;}
.appliance-waf-inline > .box > .layout .article {display: flex; flex: 1; padding-left: 30px;}
.appliance-waf-inline > .box > .layout .article .box {display: flex; flex-direction: column;}
.appliance-waf-inline > .box > .layout .article .box .logo {background: url(../img/index/kuipernet_appliance.webp) no-repeat; width: 229px; height: 38px;}
/* event start */
.event-date {background:#f56425; border-radius: 100px; font-size: 33px; font-weight: normal; width:518px; margin: 0 auto; padding: 3px 20px 0; margin-bottom: 10px;}
.event-title {font-size: 60px; font-weight: normal;}
.event-text {font-size: 1.8rem; font-weight: normal; margin-bottom: 10px;}
.swiper-slide .box .con1 .box {color: #fff; font-family: 'Black Han Sans', sans-serif; display: block;}
/* event end */
/* KT 클라우드 start */
.ktCloud .slideTxt {width: 960px; margin: 0 auto; text-align: left; display: flex; align-items: center;}
.ktCloud .slideTxt .logo {margin-left: auto;}
.ktCloud .slideTxt h2 {font-size: 1.80rem; line-height: 48px;}
.ktCloud .slideTxt h2 b {color: #ff6a00;}
/* KT 클라우드 end */
/* api start */
.api .slideTxt {width: 1200px; margin: 0 auto; text-align: left; display: flex; align-items: center;}
.api .slideTxt .logo {margin-left: auto;}
.api .slideTxt h2 {font-size: 1.80rem; line-height: 48px; width: 500px;}
.api .slideTxt h2 b {color: #ff6a00;}
/* api end */
.counter-num {width: 100%; text-align: center; background: #232f3e;}
.counter-num .box {display: flex; gap: 2%; width: 60%; margin: 0 auto; padding-left: 12%;}
.counter-num .box div {flex: 1;}
.counter-num .box div h3 {font-size: 26px; font-weight: 900; color: #ff0000;}
.counter-num .box div p {color: #fff; margin: 4px 0 14px;}

.sidenav {height: 100px; width: 100%; overflow-y: hidden; transition: 0.5s; position: relative; display: flex; align-items: center; background: url(../img/index/top_banner_bg.png) no-repeat; background-position: center top; display: none;}
.sidenav a {display: block; transition: 0.3s;}
.sidenav .closebtn {position: absolute; top: 16px; right: 46px; font-size: 32px; color: #fff; background: #000; border-radius: 50%; padding: 4px 12px;}
.top-banner-open {font-size:16px; cursor:pointer; position: absolute; right: 32px; background: #232f3e; border-radius: 0 0 6px 6px; color: #fff; padding: 0px 16px; height: 26px; line-height: 26px; display: none;}







.modal-video {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content-video {background-color: #fefefe; margin: auto; padding: 24px; width: 56%; position: relative; border-radius: 24px;}
.modal-video-close {color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; position: absolute; right: -16px; top: -16px; background: #fff; border-radius: 100%; padding: 10px 16px;}
.modal-video-close:hover, .modal-video-close:focus, a {color: #000; text-decoration: none; cursor: pointer;}




@media screen and (max-width: 1100px) {
  .main-slide-img .swiper-container, .products-icon .box, .kuipernet-contents2 .box .layout1 .box, .kuipernet-contents2 .box .layout2 .box {width: 100%;}
  .main-slide-img .swiper-slide h2 b {font-size: 1.5rem;}
  .page-nav-btn {display: none;}
  .slideTxt, .main-slide-img {margin-left: 0;}
  .slideTxt .btn-box .style1 {width: 90%;}
  .software-waf > .box, .proxy-waf > .box, .appliance-waf-inline > .box, .api > .box {width: 90%;}
  .software-waf > .box > .layout, .proxy-waf > .box > .layout, .appliance-waf-inline > .box > .layout, .api > .box > .layout {flex-direction: column;}
  .software-waf > .box > .layout .article, .proxy-waf > .box > .layout .article, .appliance-waf-inline > .box > .layout .article {padding: 0; order: 2; margin-top: 30px;}
  .marL {margin: 0;}
  .software-waf > .box > .layout .img, .proxy-waf > .box > .layout .img, .appliance-waf-inline > .box > .layout .img, .api > .box > .layout .img {width: 100%; background-position: center center; background-size: contain;}
  .layout .figure {width: 100%;}
  .ktCloud .slideTxt {flex-wrap: wrap; width: auto;}
  .ktCloud .slideTxt .logo {order: 1; display: flex; margin: 0 auto;}
  .ktCloud .slideTxt .text {order: 2; text-align: center; margin: 0 auto;}
  .ktCloud .slideTxt h2 {font-size: 1.48rem; margin-bottom: 0;}
  .api .slideTxt {flex-wrap: wrap; width: auto;}
  .api .slideTxt .logo {order: 1; display: flex; margin: 0 auto;}
  .api .slideTxt .text {order: 2; text-align: center; margin: 0 auto;}
  .api .slideTxt h2 {font-size: 1.48rem; margin-bottom: 0;}
  .gs1 {margin-top: -50px;}
  .gs1 br {display: none;}
  .gs1 .logo {justify-content: center;}
  .gs1 .logo img {width: 80%;}
  .api1 {margin-top: -50px;}
  .api1 br {display: none;}
  .api1 .logo {justify-content: center;}
  .api1 .logo img {width: 100%;}
  .counter-num, .top-banner-open {display: none;}
  .api > .box > .layout .article.padL0 {padding: 0; order: 2;}
  .video-lay {flex: .6; height: 164px;}
}
@media screen and (max-width: 900px) {
  .event-img {background: url(../img/index/mainSlide0_img2.png) no-repeat; width: 100%; height: 256px; }
}
@media screen and (max-width: 425px) {
  .layout .article .box .text,
  .layout .article .box .text2 {font-size: 0.956rem;}
  .software-waf > .box > .layout .img, .proxy-waf > .box > .layout .img, .appliance-waf-inline > .box > .layout .img, .api > .box > .layout .img {width: 100%; height: 270px; background-size: cover;}
  .swiper-pagination {display: flex;}
  .swiper-pagination-bullet {flex: 1;}
  /* event start */
  .event-date {background:#f56425; border-radius: 100px; font-size: 24px; font-weight: normal; margin: 0 auto; padding: 3px 20px 0; margin-bottom: 10px; width: auto;}
  .event-title {font-size: 60px; font-weight: normal;}
  .event-text {font-size: 1.3rem; font-weight: normal; margin-bottom: 10px;}
  .swiper-slide .box .con1 .box {color: #fff; font-family: 'Black Han Sans', sans-serif; display: block;}
  /* event end */
}
@media screen and (max-width: 375px) {
  .software-waf > .box > .layout .img, .proxy-waf > .box > .layout .img, .appliance-waf-inline > .box > .layout .img, .api > .box > .layout .img {width: 100%; height: 240px; background-size: cover;}
}
@media screen and (max-width: 320px) {
  .software-waf > .box > .layout .img, .proxy-waf > .box > .layout .img, .appliance-waf-inline > .box > .layout .img, .api > .box > .layout .img {width: 285px; height: 200px; background-size: cover;}
}