/* id */
header {
  background-color: transparent;
  height: 136px;
  width: 100%;
  position: fixed;
  z-index: 998;
  left: 50%;
  transform: translateX(-50%);
}
header.active{
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#banner {}
#m2 {padding: 50px 0;}
#m3 {
  padding: 85px 0;
  background: url('/img/main/img/m3-bgc.png') no-repeat center center;
  background-size: cover;
}
#m4 {}
#m5 {
  background: url('/img/main/img/m5-bgc.png') no-repeat center center;
  background-size: cover;
  padding-top: 100px;
}
#m6 {
  background: url('/img/main/img/m6-bgc.png') no-repeat center center;
  background-size: cover;
}
#m7 {
  background: url('/img/main/img/m7-bgc.png') no-repeat center center;
  background-size: cover;
}
#m8 {
  background-color: #fff;
}
#m9 {
  background: url('/img/main/img/m9-bgc.png') no-repeat center center;
  background-size: cover;
}
#m10 {
  background: url('/img/main/img/m10-bgc.png') no-repeat center center;
  background-size: cover;
}

footer {
  background: url('/img/main/img/footer-bgc.png') no-repeat center center;
  background-size: cover;

}
/* inner  */
.inner {width: 1240px; margin: 0 auto; padding: 0 20px;}

/* class */

.mob-side-menu {display: none;}

.popup-wrap{
  background-color:rgba(0,0,0,.3); 
  justify-content:center; 
  align-items:center;     
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;      
  display:none; 
  /* display:flex; */
  padding:15px; 
  z-index: 999;
}

.popup-wrap.active {display: flex;}

.popup{
  width:100%;             
  max-width:600px;        
  border-radius:10px;     
  overflow:hidden;        
  background-color:#fff; 
  box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); 
  padding:30px 20px;
  position: relative;
}


.popup .popup-head {text-align: center; margin-bottom: 50px;}
.popup .popup-head .head-title {
  font-size: 16px;
  padding: 10px 10px;
  background-color: #07a1f2;
  color: #fff;
}

.popup .popup-body .body-titlebox {margin-bottom: 20px;}
.popup .popup-body .body-titlebox span{font-size: 16px;}
.popup .popup-body .body-contentbox {font-size: 16px;}
.popup .popup-body .body-contentbox span{padding: 0 10px; display: inline-block;}
.popup .popup-body .body-contentbox p{margin-top: 20px;}

.popup .popup-foot {
  text-align: center;
  margin-top: 30px;
  font-size: 24px;
}

.popup .popup-foot a {
  padding: 5px 40px;
  background: linear-gradient(to right, #0063ff, #0090ff);
  border-radius: 20px;
  color: #fff;
}
.popup .popup-foot a img{ width: 30px; display: block;} 
.popup .close {position: absolute; top:4%; right:5%;}

.header-mob {display: none;}

header.active .header .hnb a{color: #000; margin-right: 20px; font-size: 16px;}
header.active .header .hnb a.e-running{color: #fff;}
header.active .header .menu .gnb > li > a{color: #000;}
.header {height: 136px;}
.header .hnb {text-align: right; padding: 20px 0;}
.header .hnb a{color: #fff; margin-right: 20px; font-size: 16px;}
.header .hnb a.e-running{margin-right: 0; background-color: #2754f8; padding: 5px 10px; border-radius: 30px;}
.header .menu{display: flex; justify-content: space-between; align-items: center;}
.header .menu .logo{margin-bottom: 10px;}
.header .menu .gnb{display: flex; padding-top: 10px; padding-bottom: 25px;}
.header .menu .gnb:hover + .gnb-childbox {display: flex;}
.header .menu .gnb > li {}
.header .menu .gnb > li > a{}
.header .menu .gnb > li > a{color: #fff; font-size: 20px; font-weight: 500; margin-right: 60px;}
.header .menu .gnb > li:last-child > a{margin-right: 0;}
.header .menu .gnb-childbox:hover{
  display: flex;
}
.header .menu .gnb-childbox{
  padding-top: 5px;
  display: none;
  position: absolute;
  width: 1240px;
  height: 250px;
  margin: 0 auto;
  top:90%;
  left:50%;
  transform: translateX(-50%);
  background-color: #fff;
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

.header .menu .gnb-childbox::after{
  content: '';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 5px;
  background-color: #07a1f2;
}

.header .menu .gnb-childbox img{margin-right: 80px;}
.header .menu .gnb-childbox ul{padding: 0 10px; margin-right: 5px;}
.header .menu .gnb-childbox ul.corporate {background-color: #daf1fd;}
.header .menu .gnb-childbox ul.intro{/*margin-right: 10px;*/margin-left:-50px;}
.header .menu .gnb-childbox ul.corporate{margin-right: 15px;}
.header .menu .gnb-childbox ul.bizplus{/*margin-right: 10px;*/margin-left:5px;}
.header .menu .gnb-childbox ul.partner{margin-right: 30px;}
.header .menu .gnb-childbox ul li{}
.header .menu .gnb-childbox ul li a{display: inline-block; font-size: 18px; margin-bottom: 10px;}
.header .menu .gnb-childbox ul li:first-child a{margin-top: 20px;}
.header .menu .gnb-childbox ul li a:hover {color: #317bd1;}
 
.header .menu .other{display: flex; align-items: center;}
.header .menu .other a{margin-left: 25px;}
#banner-video{width: 100%; height: 900px; object-fit: cover;}
.banner-text {
  position: absolute;
  z-index: 997;
  top:0;
  left:50%;
  transform: translateX(-50%);
  text-align: center;
  width: 1200px;
  height: 900px;
}

.banner-text .best-text{
  position: absolute; 
  top:18%;
  left:0%;
}
.banner-text .service-group{
  position: absolute;
  top:55%;
  left:0%;
}

.banner-text .service-group a{
  display: block;
  margin-bottom: 20px;
} 

.m2 {position: relative;}
.m2 .main-tit{font-size: 35px; color: #0090ff; font-weight: 300; margin-bottom: 50px;}
.m2 .main-tit em {font-weight: 600;}
.m2 .sub-tit{margin-bottom: 50px;}
.m2 .sub-tit span {font-size: 20px;}
.m2 .sub-tit span em{font-size: 20px; font-weight: 900;}
.m2 .right-img {position: absolute; top:0; right:-50px;}
.m2 .right-img img {width: 750px;}
.m2 .box {width: 460px; height: 330px; position: relative;}
.m2 .box a {
  width: 210px;
  height: 120px;
  position: absolute;
  background-color: #0096ff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.m2 .box a img{width: 150px; display: block;}
.m2 .box .company {
  top:0;
  left:50px;
}
.m2 .box .service {
  top:20px;
  left:270px;
  background-color: #000c22;
}
.m2 .box .business {
  top:130px;
  left:50px;
  background-color: #000c22;
}
.m2 .box .partner {
  top:150px;
  left:270px;

}



.m3 {text-align: center;}
.m3 .m3-img {width: 100%;}
.m3 .m3-img img {width: 100%;}
.m4-mob {display: none;}
.m4 {position: relative; height: 470px; z-index: -1;}
.m4 .m4-img {position: absolute; left: -330px; top: -80px;}
.m4 .m4-img img {width: 100%;}
.m5 {position: relative; height: 660px;}
.m5-img {position: absolute; left: -150px;}
.m5-img .more {
  position: absolute;
  top: 23%;
  left: 45%;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
  background-color: #ffc616;
  font-size: 16px;
}
.m6 {text-align: center; padding: 90px 0; position: relative;}
.m6 .more {
  position: absolute;
  top: 20%;
  right:0;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
  background-color: #ff0000;
  font-size: 16px;
}

.m6 .tit{color: #fff; font-size: 45px; margin-bottom: 60px;}
.m7 {display: flex; justify-content: center;  height: 700px; padding:50px 0;}   
.m7 .left{width: 50%; padding-left: 20px;}
.m7 .left .tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
.m7 .left .tit .left-icon {}
.m7 .left .tit .left-icon img {width: 150px;}
.m7 .left .tit .left-text{color: #fff;}
.m7 .left .tit .left-text div{font-size: 25px; font-weight: 300;}
.m7 .left .tit .left-text div:first-child{font-weight: 600;}
.m7 .left .form {margin-top: 30px;}
.m7 .left .form .line {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.m7 .left .form .line2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.m7 .left .form .line3{text-align: right; margin-right: 120px; margin-top: 20px;}
.m7 .left .form .line3 .appli {
  padding: 10px 20px;
  background-color: #fff;
  font-size: 20px;
  border-radius: 20px;
}
.m7 .left .form .line2 input[type=checkbox] {
  width: 25px;
  height: 25px;
  outline: none;
  border:none;
  
}
.m7 .left .form .line2 label{
  font-size: 25px;
  color: #fff;
  margin-right: 10px;
}
.m7 .left .form .line label {
  display: inline-block;
  width: 150px;
  text-align: left;
  font-size: 25px;
  color: #fff;
}
.m7 .left .form .line input[type=text] {
  height: 40px;
  width: 300px;
  border: none;
  outline: none;
  border-radius: 20px;
  padding: 0 20px;
  background-color: #ff8ec8;
  color: #fff;
  font-size: 18px;
}
.m7 .right {
  width: 50%;
}
.m7 .right .tit{display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-bottom: 30px;}
.m7 .right .tit .right-icon {}
.m7 .right .tit .right-icon img {width: 150px;}
.m7 .right .tit .right-text{color: #fff;}
.m7 .right .tit .right-text div{font-size: 25px; font-weight: 300;}
.m7 .right .tit .right-text div:first-child{font-weight: 600;}

.m7 .right .right-body {}
.m7 .right .right-body .list-box{}
.m7 .right .right-body .list-box .list {
  display: flex;
  align-items: center;
  gap: 35px;
  margin: 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
  margin-bottom: 20px;
  position: relative;
}
.m7 .right .right-body .list-box .list .icon{width: 100px;}
.m7 .right .right-body .list-box .list .icon img {width: 100%; display: block;}
.m7 .right .right-body .list-box .list .text{font-size: 24px; color: #fff;}
.m7 .right .right-body .list-box .list .the-more {
  position: absolute;
  bottom:10px;
  right: 20px;
  font-size: 18px;
  background-color: #fff;
  padding: 3px 15px;
  border-radius: 20px;
}

.m8 {padding-top: 100px; height: 490px; position: relative;}
.m8 .more {
  position: absolute;
  top: 20%;
  right:0;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
  background-color: #ff0000;
  font-size: 16px;
}
.m8 .main-tit{font-size: 45px; margin-bottom: 25px; text-align: center;}
.m8 .m8-menu {margin-bottom: 85px; text-align: center;}
.m8 .m8-menu a {font-size: 24px; color: #0696fb; margin-right: 25px; padding-right: 25px;}
.m8 .m8-menu a:last-child {margin-right: 0;}

.m8 .biz-plus-box {
  position: absolute;
  z-index: 997;
  top:60%;
  display: flex;
  justify-content: space-between;
  gap: 25px;
}
.m8 .biz-plus-box .biz-plus{ width: 33%; }
.m8 .biz-plus-box .biz-plus .biz-img{}
.m8 .biz-plus-box .biz-plus .biz-img img {width: 100%; display: block;}
.m8 .biz-plus-box .biz-plus .desc {
  padding: 15px 20px 10px 20px;
  background-color: #fff;
  height: 350px;
}
.m8 .biz-plus-box .biz-plus .desc .main{font-size: 24px; color: #0696fb;}
.m8 .biz-plus-box .biz-plus .desc .sub{font-size: 24px; color: #000; margin-bottom: 40px;}
.m8 .biz-plus-box .biz-plus .desc .cont{margin-bottom: 20px; font-size: 18px; height: 120px;}
.m8 .biz-plus-box .biz-plus .desc .date{font-size: 18px; text-align: right;} 

.m9 {height: 1100px; padding-top: 500px; padding-bottom: 0; position: relative;}
.m9 .more {
  position: absolute;
  top: 51%;
  right:0;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
  background-color: #1886ca;
  font-size: 16px;
}
.m9 .tit {text-align: center; font-size: 45px; color: #fff;}
.m9 .tit-sub {text-align: center; font-size: 24px; color: #fff; margin-bottom: 50px;} 
.m9 .box {display: flex; justify-content: center; gap: 20px;}
.m9 .box .item {width: 25%;}
.m9 .box .item .biz-img {}
.m9 .box .item .biz-img img{width: 100%; display: block;}
.m9 .box .item .desc{background-color: #fff; padding: 20px 10px; height: 200px;}
.m9 .box .item .desc .title{font-size: 20px; height: 130px;}
.m9 .box .item .desc .date{text-align: right; font-size: 18px;}
.m10 {padding: 100px 0;}
.m10 .tit{ text-align: center; color: #fff; font-size: 45px; font-weight: 300; margin-bottom: 40px;}
.m10 .tit em{font-weight: 600; }
.m10 .customer-box {display: flex; gap: 20px;}
.m10 .customer-box .linebox{display: flex; gap: 20px;}


.footer {padding-top: 50px; padding-bottom: 120px; display: flex; gap: 40px;}
.footer.ft-desc {}
.footer .ft-desc .line{}
.footer .ft-desc .line span{color: #fff; font-size: 17px;}
.footer .ft-desc .line1 span{margin-right: 20px;}
.footer .ft-desc .line3 span{margin-right: 20px;}


@media (max-width: 480px) {
	.m8 .biz-plus-box .biz-plus{ width: 100%; }
	header {
	  height: 0px;
	}
}