@charset "utf-8";

* {margin:0;padding:0;border:0;outline:0;vertical-align: top;box-sizing: border-box;}
html{width:100%;margin:0 auto;}
body {max-width: 1920px; font-family: 'Pretendard-Regular';font-size:1em;color:#333;line-height:1;text-align:center;*word-break:break-all;-ms-word-break:break-all;margin:0 auto;vertical-align:middle;background-color: #fff;}
h1, h2, h3, h4, h5, p{ font-family:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Noto Sans', 'sans-serif' !important;}

ul, ol, dl {list-style:none;}
img {width:100%;border:0;margin:0;padding:0;}
video {width:90%;border:0;margin:0;padding:0;}
a {text-decoration:none;}
a:visited, a:link, a:link {color:#fff;}
table {border-collapse:collapse;border-spacing:0;}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


.wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden
} 

header {display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 5; color: #000; height: 70px; line-height: 70px;}
header .head_rap {background:none; backdrop-filter: blur(5px); width: 100%; max-width: 1920px; position: absolute; left: 50%; transform: translateX(-50%);
    border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex;}
header .head_rap .logo a,header.bott .head_rap .logo a { display: block; width: 100%; height: 100%; ;}

header .head_rap .logo {position: relative;}
header .head_rap .logo img {width: 70%;vertical-align: middle;}
header nav {position: relative;margin-left: auto;}
header nav ul { float: right;}
header nav ul li { float: left; margin-left: 20px; margin-right: 10px; font-weight: 400; font-size: 18px; transition: all 0.5s;}
header nav ul li:last-child a { border-radius: 50px; padding: 10px 25px; 
    background: linear-gradient(to top, #27282c, #002554); color: #fff; border: 1px #fff solid;}
header nav ul li a { transition: all 0.75s;}
header nav ul li a:hover { color: #20edff;}
header nav ul li:last-child a:hover { color: #21a1ff; background: #fff; font-weight: 700;}
header nav::after { content: ''; display: block; clear: both;}
header.bott { height: 70px; line-height: 70px; background:none; border-bottom: 1px solid #fff;}
header.bott nav ul {float: right;}
header.bott nav ul li { float: left; margin-left: 30px; font-weight: 600; font-size: 18px; transition: all 0.5s; color: #226cff;}
header.bott nav ul li:last-child a { border-radius: 50px; padding: 10px 25px; background: #000; color: #fff;}
header.bott nav ul li a {transition: all 0.75s;}
header.bott nav ul li a:hover { color: #20edff;}
header.bott nav ul li:last-child a:hover { color: #fff; background: #226cff; font-weight: 700;}

.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
.fp-is-overflow .fp-overflow.fp-auto-height,
.fp-is-overflow>.fp-overflow {overflow-y: hidden;}



main section article.sec01 {
    background: #f6f6f6;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
}


.sec01 #videoWrap .bgColor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #040a1bc2;
    /*background: linear-gradient(to bottom, #040a1bad, rgb(0 0 0 / 85%));*/
    z-index: 1;
}

main section article.sec02 {
    background: #ffffff;
    color: #141414;
    background-size: 100% 100%;
    background-position: center center;
}



.bg {
    width: 100%;
    overflow: hidden;
    margin: 0px auto;
    position: relative;
    display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  }
  
  
  section .bg .tittle 
  {position: absolute; max-width: 1200px; z-index: 2; top: 30%;}
  
  section .bg .tittle h1 {
    font-family: 'Pretendard-Regular';
      font-size: 6rem;
      line-height: 9rem;
      font-weight: 700;
  }
  
 section .bg .tittle h1 span {color: ;}
  
  section .bg .tittle p {margin: 7px 0 50px;
          text-align: center;
          font-size: 2rem;
          line-height: 2.8rem;
          font-family: 'Pretendard-Regular';
          font-weight: 300;
          color: rgba(255, 255, 255, .7);}

 section .bg .tittle p span {color: ;}

 section .bg .tittle img {max-width: 700px;}
  
  video {width: 100%;}

  .text {
  position:absolute;
  top:0px;
  left:50%;
  transform:translateX(-50%);
  max-width:720px;
  }

  .text p {
    text-align: center;
    font-size: 48px;
    color: #ffffff;
  }


.wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden
}

main section article.sec02 .wrap {padding: 6em 8em; position: relative; max-width: 1500px; display: block;}
main section article.sec02 .text-table {}
 
main section article.sec02 .text-table .main_txt {width: 30%; vertical-align: middle;padding-left:2%;}
main section article.sec02 .text-table .points {width: 44%; position: relative; padding-left: 13%;}

main section article.sec02 .text-table .tit{font-size:67px; text-align: left; line-height: 1.2em;}
main section article.sec02 .text-table .tit_m{font-size:67px; text-align: left; line-height: 1.2em;display: none;}

main section article.sec02 .text-table p {
    font-weight: 500;
    text-align: left;
    margin-bottom: 16px;
    font-size: 24px;
}

main section article.sec02 .text-table .btn {padding: 11px 7px 0px;
    text-decoration: none;
    font-size: 1.5em;
    color: #000;
    background: #fff;
    float: left;
    font-family: 'Montserrat';
    font-weight: 600;}

main section article.sec02 .text-table .points .txt {font-weight: 300; font-size:1.8em; letter-spacing: -0.025em; cursor: pointer;line-height: 2;}

main section article.sec02 .text-table .points .step {position: absolute; left: 0%; height: 79%; margin: 0; width: auto; 
    bottom: 12%; margin-left:1%;}
main section article.sec02 .text-table .points .step2 {display: none;}

main section article.sec02 .text-table .points .txt p:hover {font-weight: 800; }


main section article.sec03 { text-align:center;  color:#aaa; background-color: #fff; background-size: 100% 100%; background-position: center center; padding-top: 100px ;padding-bottom: 10px;}
  main section article.sec03 .txt3 {width:40%;}

  main section article.sec03 .menu {display: flex;margin-top: 2%;padding-right: 6%;padding-left: 5%;}

  main section article.sec03 #menu1 {color:#141414; padding:40px 20px 10px 20px; line-height: 1.5; }
  main section article.sec03 #menu1 img {  width: 170px; height: 185px;}
  main section article.sec03 #menu2 img {  width: 170px; height: 185px;}
  main section article.sec03 #menu3 img {  width: 170px; height: 185px;}
  main section article.sec03 #menu4 img {  width: 170px; height: 185px;}
  main section article.sec03 #menu5 img {  width: 170px; height: 185px;}

  main section article.sec03 #prdPar_b03 {display: flex ;justify-content: center;}
  main section article.sec03 #prdPar_b04 {display: flex ;justify-content: center;}
  main section article.sec03 #prdPar_b05 {display: flex ;flex-direction: row-reverse;}

  main section article.sec03 #prdPar_b01 p {display:none; padding: 20px 20px; line-height:160%;font-size:20px;margin:0; background-color: #0248b8 ; color: #fff ; margin-top: 10px; border-radius: 20px  }
main section article.sec03 #menu2 {color:#141414; padding:40px 20px 10px 20px; line-height: 1.5; }
  main section article.sec03 #prdPar_b02 p {display:none; padding: 20px 20px; line-height:160%;font-size:20px;margin:0; background-color: #0083e8; color: #fff ; margin-top: 10px; border-radius: 20px  }
main section article.sec03 #menu3 {color:#141414; padding:40px 20px 10px 20px; line-height: 1.5; }
  main section article.sec03 #prdPar_b03 p {display:none; padding: 20px 20px; line-height:160%;font-size:20px;margin:0; background-color: #0248b8; color: #fff ; margin-top: 10px; border-radius: 20px;width: 50%; }
main section article.sec03 #menu4 {color:#141414; padding:40px 20px 10px 20px; line-height: 1.5;}
  main section article.sec03 #prdPar_b04 p {display:none; padding: 20px 20px; line-height:160%;font-size:20px;margin:0; background-color: #0083e8; color: #fff ; margin-top: 10px; border-radius: 20px;width: 50%; }
main section article.sec03 #menu5 {color:#141414; padding:40px 20px 10px 20px; line-height: 1.5;}
  main section article.sec03 #prdPar_b05 p {display:none; padding: 20px 20px; line-height:160%;font-size:20px;margin:0; background-color: #0248b8; color: #fff ; margin-top: 10px; border-radius: 20px;width:40%;  }
main section article.sec03 p {font-family: "pretendard", sans-serif; font-size: 23px; line-height: 1.5; text-align:left;      display: inline-block;
    position: absolute;
    margin-top: 20%;}
main section article.sec03 p span {font-size: 15px;}


main section article.sec04 {
    background: #2054e6;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
}
main section article.sec04-1 {
    background: #fff;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
}
main section article.sec04-2 {
    background-color: #f5f5f5;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
}

main section article.sec05 {
    background: #f6f9ff;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
    padding-bottom: 1%;
}

main section article.sec08 {
    background: #313131;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
    padding-top: 50px;
    padding-bottom: 100px
}

main section article.db {
    background: #2054e6;
    color: #fff;
    background-size: 100% 100%;
    background-position: center center;
}


/*new db*/

input,
textarea,
button,
select,
option {
    border: none;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-size: 16px;
    color: #222;
    background: none;
}

input,
textarea {
    border: 1px solid #eee;
    padding: 6px 8px;
    box-sizing: border-box;
}

textarea {
    resize: none;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
}

th,
td {
    border: none;
}



/* SECTION */
.wrap06 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.sec {
    width: 100%;
    margin: 150px 0px 150px 0px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
}

.sec .tit {
    text-align: center;
}

.sec .tit em {
    display: inline-block;
    font-style: normal;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    margin-top: 20px;
    position: relative;
}


.sec .tit h2 {
    font-size: 56px;
    font-weight: 800;
    color: #222;
    letter-spacing: -0.3px;
}

.sec .tit h2 span {
    color: #226cff;
}

.sec p {
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #222;
    margin-top: 1em;
}

.sec p b {
    font-weight: 800;
}

.sec p b.p {
    color: #226cff;
}


.sec06 {
    padding: 150px 0 150px;
}
/*SECTION 06 */
.sec06 {
    /*background: url(../img/sec06bg.jpg);*/
    background-color: #040a1b;
    color: #fff;
    margin: 0px;
}

.sec06 .tit {
    margin-bottom: 25px;
}

.sec06 .tit h2 {
    color: #fff;
}

.sec06 .left {
    width: 50%;
    float: left;
    padding-right: 35px;
}

.sec06 .wrap::after {
    content: '';
    display: block;
    clear: both;
}


.sec06 .left .sec06txt li {
    display: block;
    vertical-align: top;
    width: 100%;
    height: 60px;
    font-size: 15px;
    color: #fff;
    text-align: left;
    margin-top: 37px;
}

.sec06 .left .sec06txt li .dbicon{
    width: 5%;
    vertical-align: middle;
    margin-right: 2%;
}

.sec06 .left .sec06txt li span {
    display: inline-block;
    vertical-align: middle;
    font-size: 26px;
    line-height: 40px;
    letter-spacing: -0.045em;
}

.sec06 .left iframe {
    width: 600px;
    height: 300px;
    margin-top: 50px;
}

.sec06 .right {
    width: 50%;
    float: left;
}

.sec06 .right ul {
    padding-top: 20px;
    max-width: 600px;
}

.sec06 .right ul li {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0px;
    padding: 5px;
    box-sizing: border-box;
}

.sec06 .right ul li.full {
    width: 100%;
}


.sec06 .right .input-title {text-align: left; padding: 2% 2% 1%;}

.sec06 .right input,
.sec06 .right select {
    width: 100%;
    height: 55px;
    line-height: 53px;
    border: 1px solid #ddd;
    background: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-indent: 20px;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sec06 .right input.tel,
.sec06 .right select.tel {
    width: 33%;
}

.sec06 .right textarea {
    width: 100%;
    height: 180px;
    padding: 20px;
    border: 1px solid #ddd;
    background: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sec06 .right .btm {
    margin-top: 15px;
    text-align: left;
    max-width: 600px;
}

.sec06 .right .btm input {
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.sec06 .right .btm input label {
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    float: left;
}

.sec06 .right .btm button {
    float: right;
    width: 215px;
    height: 50px;
    line-height: 50px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-weight: 600;
    background: #226cff;
    color: #fff;
    border: 0;
    font-size: 18px;
    text-align: center;
}


#MEDIA .swiper-wrapper img {background: #313131;}



.slider {
  width: 100%;
  overflow: hidden;   white-space: nowrap;
            
}

.image {
  display: flex;
animation: aniScroll 10s linear infinite;
}

.image img {
  width: 170px;
    height: 100px;/* 이미지의 너비에 맞게 조절 */
    margin: 30px 10px 30px 10px;
}


footer {font-family: "pretendard", sans-serif; 
    margin-top: 40px;
    margin: auto;
    line-height: 20px;
    font-size: 14px;
    padding: 40px;
    text-align: center;
    background: #eee;
    color: #999;
    border-top: 1px dotted #ddd;
    letter-spacing: -0.08em;
}
footer .logo {font-family: "Montserrat", sans-serif:"";font-size: 20px; font-weight:500;color: #999;padding: 10px 0}


@keyframes   slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px); /* 이미지의 너비 * 이미지 개수 */
      
    }}

/* SECTION TOP */
#main-top {
    background-color: #f6f6f6;
    width: 100% !important;
    position: relative;
    overflow: hidden;
}

#main-top .main-back {
    width: 100%;
    height: 100vh;
    position: relative;
}

#main-top .main-back::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: url(../img/bg.png);
    background-repeat: repeat;
    opacity: 0.9;
}

#main-top .main-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#main-top .main-top-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    width: 40%;
}


	
.img_list{
	width: 100%;
	height: 750px;
	position: absolute;
	top: 0;
	left: 0;
}   
    
.img_list img{
	width: 100%;

}
    

#PORTFOLIO {
    text-align: left;
    padding: 7em 3em 7em;

background-color: #ffffff;
}


#PORTFOLIO > div h2 {
    display: inline-block;
    font-size: 40px;
    line-height: 0px;
    font-weight: 700;
    letter-spacing: -0.05em;
      font-family: "pretendard", sans-serif;
    position: relative;
    padding-bottom: 35px;
    color: #1e1e1e;
}

/*
#PORTFOLIO > div h2 span{background-color: #040a1b;
    display: inline-block;
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
      font-family: "din-2014", sans-serif;
    position: relative;
   padding: 0 10px 0;
    color: #ffffff;;
}*/


.figure {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    display: block;
    max-width: 1500px;
  }
  .figure p {
    color: red;
    padding: 20px 0;
    font-size: 50px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    visibility: hidden;
    position: relative;
    transform: translate3d(-10%, 0, 0);
  }
  .figure.is-visible::before {
    -webkit-animation: mask 1s;
    animation: mask 1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  .figure.is-visible p {
    visibility: inherit;
    transform: translate3d(0%, 0, 0);
    transition: 1s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.6s;
  }
  .figure:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width:30%;
    height: 100%;
    background: rgb(43, 96, 222);
    transform: translateZ(0) scaleX(0);
  }
  .figure:after {
    content: "";
    display: block;
  }
  
  @keyframes mask {
    0% {
      transform-origin: left;
      transform: scaleX(0) translateZ(0);
      animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    }
    0.0001% {
      transform-origin: left;
    }
    50% {
      transform-origin: left;
      transform: scaleX(1) translateZ(0);
    }
    50.0001% {
      transform-origin: right;
    }
    100% {
      transform-origin: right;
      transform: scaleX(0) translateZ(0);
    }
  }




#PORTFOLIO > div p {
  
    color: rgb(43, 96, 222);
    display: inline-block;
    font-size: 46px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: -0.05em;
    font-family: "pretendard", sans-serif;
    position: relative;
    padding-bottom: 50px;

}



#PORTFOLIO ul {
    width: 100%;
    max-width: 1500px;
    margin: 0px auto;
}

#PORTFOLIO ul li {
    display: inline-block;
    width: 32%;
    padding: 10px 5px;
    margin: 5px 0.1% 0;
    box-sizing: border-box;
    border-radius: 15px;

}


#PORTFOLIO ul li:hover {border-radius: 50px;}



#PORTFOLIO ul li img {
    width: 100%;
    background-color: #fff;
}




/*** effect - shadow 1 ***/


#PORTFOLIO ul li img
{
-webkit-box-shadow: 0 28px 16px -26px black;
-moz-box-shadow: 0 28px 16px -26px black;
box-shadow: 0 28px 16px -26px black;
}

#PORTFOLIO ul li img:hover
{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);

-webkit-box-shadow: 0 58px 36px -56px black;
-moz-box-shadow: 0 58px 36px -56px black;
box-shadow: 0 58px 36px -56px black;
}

#PORTFOLIO ul li img
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}

#PORTFOLIO ul li img:hover
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}




/*-- 카운터 숫자 --*/
#campain {
    padding: 12% 5% 8%;
    background-color: #040a1b;
}

#campain .campainWrap {
    width: 90%;
    margin: 0 auto;
}

#campain .campain-group ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#campain .campain-group ul li {
    width: 25%;
    margin: 0 -1%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
}

#campain .campain-group ul li:nth-child(1),
#campain .campain-group ul li:nth-child(3) {
    background: #ffffff;
}

#campain .campain-group ul li:nth-child(2),
#campain .campain-group ul li:nth-child(4) {
    background:rgb(15 74 216 / 76%);

    /*background: #2778d991;*/
}

#campain .campain-group ul li:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

#campain .campain-group ul li h5 {
    display: inline-block;
    font-size: 3.6rem;
    font-family: 'pretendard';
    vertical-align: middle;
}

#campain .campain-group ul li span.percent {
    font-size: 2.6rem;
    vertical-align: middle;
}

#campain .campain-group ul li p {
    color: #888;
    margin: 10px 0 5px 0;
    font-size: 2rem;
}

#campain .campain-group ul li span.s-txt {
    display: block;
    font-size: 1.6rem;
    margin: 5px 0 0;
    color: #888;
}

#campain .campain-group ul .t2 p {color: #fff;}
#campain .campain-group ul .t2 .count {color: #fff;}
#campain .campain-group ul .t2 .percent {color: #fff;}

#campain .campain-group ul .t4 p {color: #fff;}
#campain .campain-group ul .t4 .count {color: #fff;}
#campain .campain-group ul .t4 .percent {color: #fff;}



/*-- 서비스 --*/
#ourservice {
    padding: 7em 5% 8%;
    width: 100%;
    position: relative;
    background-color: #040a1b;
}

#serviceWrap {
    position: relative;
    z-index: 2;
    max-width: 1740px;
    margin: 0 auto;
}

.service-title h1 {
    font-size: 5.4rem;
}

.service-list {
    margin: 180px 0 0;
}

.service-list li {
    font-size: 9rem;
    font-weight: 700;
    margin: 26px 0 0;
}

.service-list li:nth-child(1) {
    margin: 0;
}

.service-list li span.name {
    position: relative;
    transform: translateY(100%);
    opacity: 0;
    letter-spacing: -.25rem;
    font-weight: 700;
    font-size: 4rem;
    color: #2445eb;
}

.service-list li:hover {
    transition: all .2s ease-in-out;
    color: transparent;
    -webkit-text-stroke: #fff 1px;
}

.service-list li:hover span.name {
    -webkit-text-stroke: 0;
    transform: translateY(0);
    opacity: 1;
}

#serviceBGWrap {
    position: absolute;
    top: 10%;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#serviceBGWrap .back {
    position: absolute;
    width: 750px;
    height: 750px;
    border-radius: 100%;
    background: linear-gradient(to right, rgba(36, 69, 235, .2), rgba(0, 39, 128, .2));
}


.middle-title {
    margin: 20px 0 0;
    text-align: left;
}

.middle-title_m {
    margin: 20px 0 0;
    text-align: left;
    display: none;
}


.middle-title h2 {
    letter-spacing: -0.07rem;
    font-size: 3.5rem;
    color: #fff;
    font-weight: 400;
}


.middle-title_m h2 {
    letter-spacing: -0.07rem;
    font-size: 3.5rem;
    color: #fff;
    font-weight: 400;
}

.middle-title h2 span{
    color: rgb(43, 96, 222);
    font-weight: 700;
   
}

.middle-title_m h2 span{
    color: rgb(43, 96, 222);
    font-weight: 700;
}


.contents-list {
    margin: 60px 0 0;
}

.contents-list ul {
    display: flex;
    flex-wrap: wrap;
}

.contents-list ul li {
    width: 33%;
    padding: 2.5% 2% 2.5%;
    border: 1px solid #ffffff5e;
    transition: all .3s ease-in-out;
    background-color: #0d458c30;
    text-align: left;
}

/*.contents-list ul li:hover {
    background: linear-gradient(to left, #000131, rgb(1, 64, 201));
}*/


.contents-list ul li:hover {
    background: #fff
}

.contents-list ul li:hover p {
    opacity: 1; color: #00518b; font-weight: 600;
}

.contents-list ul li:hover h5 {opacity: 1; color: #002554;; font-weight: 700;}

.contents-list ul li h5 {
    font-size: 2.5rem;
    color: #fff;
}

.contents-list ul li p {
    transition: all .2s ease-in-out;
    opacity: .6;
    font-size: 1.25rem;
    line-height: 2rem;
    color: #FFF;
    margin: 20px 0;
}

.contents-list ul li .tag {
    font-size: 1.5rem;
    color: #888;
}









  .rolling-banner-container {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;
    background-color: #ffffff;
    height: 70vh;
    margin-top: 8em;
    margin-bottom: 7em;
}

 .rolling-banner-container h2 {
    color: #0f0f0f;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.35em;
    letter-spacing: -0.02em;
 }

.rolling-banner {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    
    
}

.banner-track {
    display: flex;
    width: max-content; /* 콘텐츠 크기만큼 자동 확장 */
    animation: rollLeft 50s linear infinite;
    justify-content: flex-end;
}



.rolling-banner-bottom .banner-track {
    animation: rollRight 50s linear infinite;
}

.banner-item {
    flex: 0 0 auto;
    padding: 0 7.5px;
}

.banner-item img {
    height: auto;
    width: 49%;
}



@keyframes rollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes rollRight {
    0% { transform: translateX(0%); }
    100% { transform: translateX(50%); }
  }



  
/* 무한 롤링 애니메이션 
@keyframes rollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes rollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
*/


/* SECTION 02 */
.sec07 {
    background: #f8f8f8;
    padding: 150px 0 150px;
    margin: 0px;
}

.sec07 .wrap {
    position: relative;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sec07 .wrap::after {
    content: '';
    display: block;
    clear: both;
}

.sec07 .tit {
    margin-bottom: 50px;
}

.sec07 .txt {
    float: left;
    width: 50%;
    padding-left: 5%;
}

.sec07 .img {
    float: left;
    width: 50%;
}

.sec07 .img img {
    width: 85%;
}

.sec07 .txt h2 {
    font-size: 4.6em;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    margin-top: 35px;
    text-align: left;
}

.sec07 .txt h2 span {
    color: #226cff;
}

.sec07 .txt p {
    font-size: 20px;
    text-align: left;
    color: #ffffff;
    margin: 7px auto;
    font-weight: 700;
    padding: 25px 0;
    font-weight: 300;

}

.sec07 .txt .txt_m {
    font-size: 20px;
    text-align: left;
    color: #ffffff;
    margin: 7px auto;
    font-weight: 700;
    padding: 25px 0;
    font-weight: 300;
    display: none;

}



.sec07 .txt p span {
    color: #226cff;
}


.sec07 .tit em {
    display: inline-block;
    font-style: normal;
    color: #226cff;
    font-size: 25px;
    font-weight: 900;
    margin-bottom: 20px;
    position: relative;
}



#WORK{
    background: linear-gradient(90deg, #0b183d, #040a1b, #000204);
    }

   /* #WORK{
        background-color: #002554;
        background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
        background: linear-gradient(90deg, #002554, #a9b8c3);
        linear-gradient(90deg, #002554, #000f1a);
        linear-gradient(90deg, #040a1b, #27394f)
        } */
    
    #WORK li{
        margin: 10vw 0;
        text-align: left;
    }

    #WORk .inner {width: 55%;}
    
    .sec07  .wrap .inner li p {
        display: block;
        color: #fff;
        font-family: 'Pretendard-Regular';
        font-size: 1.5em;
        font-weight: 400;
        line-height: 1.2;
        text-align: left;
      }

      .sec07 .wrap .txt {padding-left: 8%;border-left: 3px dashed #fff;}


      #WORK li:first-child {
        margin-top: 0;
      }
      
      #WORK li:last-child {
        margin-bottom: 0;
      }
      
      #WORK li:nth-child(even) {
        text-align: right;
      }
      
      a {
        color: #fff;
      }
      
      a:hover {
        text-decoration: none;
      }
      
      [data-js="reveal"] {
      }
      
      [data-reveal="content"] {
        display: inline-block;
        position: relative;
      }
      
      [data-reveal="cover"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        z-index: 1;
      }
      
      [data-reveal="text"] {
        opacity: 0;
      }
      
      @keyframes reveal-cover {
          0%   { width: 0;left: 0; }
          44%  { width: 100%;left: 0; }
          54%  { width: 100%;left: 0;  }
          100% { width: 0;left: 100%; }
      }
      
      @keyframes reveal-text {
          0%   { opacity: 0; }
          44%  { opacity: 0; }
          54%  { opacity: 1; }
      }
      
      [data-js="reveal"].loaded [data-reveal="cover"] {
        animation: reveal-cover 1.5s ease-in-out;
      }
      
      [data-js="reveal"].loaded [data-reveal="text"] {
        opacity: 1;
        animation: reveal-text 1.5s ease-in-out;
      }
      






      .responsive-menu {
        position: relative;
      }
      
      .main-menu, .sub-menu {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0;
      }

      
      .main-menu > li.active .sub-menu {
        opacity: 1;
        pointer-events: auto;
        margin-top: 0;
        z-index: 20;
      }
      @media only screen and (min-width: 1221px) {
        .main-menu > li:hover .sub-menu {
          opacity: 1;
          pointer-events: auto;
          margin-top: 0;
          z-index: 20;
        }
      }
      .main-menu .expand {
        display: none;
      }
      @media only screen and (max-width: 1220px) {
        .main-menu {
          opacity: 0;
          pointer-events: none;
          margin-top: 20px;
          transition: 200ms all;
          position: absolute;
          top: 102%;
          left: 0;
          right: auto;
          min-width: 200px;
          width: 50%;
          left: 30%;
        display: grid;
        }
        .main-menu li {
          display: block;
        }
        .main-menu .expand {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          padding: 0.5rem 1rem;
          z-index: 15;
          transform-origin: 50%;
          transition: 200ms all;
        }
        .main-menu .expand.active {
          transform: rotate(45deg);
        }
      }
      @media only screen and (max-width: 1220px) {
        .main-menu.active {
          opacity: 1;
          pointer-events: auto;
          margin-top: 0;
          z-index: 20;
        }
      }
      
      .sub-menu {
        opacity: 0;
        pointer-events: none;
        margin-top: 20px;
        transition: 200ms all;
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        min-width: 200px;
      }
      @media only screen and (max-width: 1220px) {
        .sub-menu {
          display: block;
          z-index: 20;
          width: 100%;
        }
      }

      .toggle-menu {
        display: none;
      }
      @media only screen and (max-width: 1220px) {
        .toggle-menu {
          display: inline-block;
        }
      }
  
      nav {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    
        font-size: 1rem;
        box-sizing: border-box;
        width: 85%;
      }
      @media only screen and (min-width: 1221px) {
        nav {
          text-align: right;
        }
      }
      
      .toggle-menu {
        color: #ffffff;
        padding-right: 1rem;
        float: right;
      }
      .toggle-menu span {
        display: inline-block;
        vertical-align: middle;
        padding-left: 0.3rem;
      }
      .toggle-menu svg {
        display: inline-block;
        vertical-align: middle;
      }
    
      
    
      .main-menu li a {
        color: #ffffff;
      }
      .main-menu .expand{
        color: #ffffff;
        font-size: 1.5rem;
      }
      
      @media only screen and (max-width: 1220px) {
        .sub-menu {
          background: #777777;
        }
      }