#header a {color:#000;}
/*  #header.sub .header_wrap .side_btn li::after, #header.sub .header_wrap .menu li .submenu li.active:hover::before {background: #000;}
#header.sub.active *, #header.sub.active .side_btn li a,#header.sub.active .side_btn li a, .text_slide {color:#fff;}
#header.sub.active .header_wrap .side_btn li::after, #header.sub.active .header_wrap .menu li .submenu li.active:hover::before {background: #fff;}
#header.sub.open_submenu.active_border {border-bottom: 1px solid rgba(0, 0, 0, 0.5)}
#header.sub.active.open_submenu.active_border {border-bottom: 1px solid rgba(255, 255, 255, 0.5)}

#logo .main_logo {display: none;}
#logo .sub_logo {display: block;}
#header.sub.active #logo .main_logo {display: block;}
#header.sub.active #logo .sub_logo {display: none;} */

#main {display: none;}
#quick .to_top.sub {color: #000;}

.fl_right {float: right;}
.fl_left {float: left;}

.bg.img {position: absolute;}
.bg.img.mo {display: none}
.sub_tit {letter-spacing: .5em; width: 100%;}
.sub_tit::before {display: none;}
.text_stroke {-webkit-text-stroke: 1.5px #000;color: rgba(0,0,0,0);}

span.line.l_03 {width: 5%;}
span.line.l_04 {width: 10%;}
span.line.l_05 {width: 8%;}
span.line.vertical_line.l_06 {height: 190px;  width: 3px;}
.underline {position: relative; width: fit-content;}
.underline::after {    content: "";width: 98%; height: 0.29em;background: rgba(0, 103,230, 0.2);position: absolute;left: 0.1em;bottom: 0.32em;}
.underline>.underline::after {display: none;}

#section01.sub p.ptColor::after {content: ""; top: -50%;  left: 0;width: 100%;  position: absolute;  height: 200%;  z-index: -1;   
  animation: rotate_img 6s ease infinite;transform-origin: 50% 50%; background: url(../img/cube.png) no-repeat center / auto 100%; }
#section03.sub .cont {padding: 12em 0; }


@keyframes rotate_img{
    100% {
        transform: rotate(360deg);
    }
}

.symbol_wrap {position: relative;width: 290px;height: 150px;text-align: center;margin: 0 auto;transform: none; opacity: 0;}
.symbol {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.symbol01 img {z-index: 5;  animation: rotate 10s linear infinite; }
.symbol02 img {z-index: 4; animation: rotate_reverse 10s linear infinite; }
.symbol03 img {z-index: 3; animation: rotate_180 10s linear infinite; }

@keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
@keyframes rotate_reverse {
  from {
      -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    
  }
  to {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
  }
}
@keyframes rotate_180 {
  from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
    }
}

ul.solution_list {width: 100%; opacity: .2;}
ul.solution_list, ul.how_list {display: block; clear: both;}
ul.solution_list:nth-child(1){padding-bottom: 100px;}
ul.solution_list:nth-child(2){padding-right: 150px;  padding-bottom: 250px;}
ul.solution_list:nth-child(3){padding-left: 150px; padding-bottom: 150px;}
ul.solution_list:nth-child(4) {padding: 0;}
ul.solution_list li, ul.how_list li, .icon {display: inline-block; width: auto;}
ul.solution_list li:nth-child(1) {position: relative;}
ul.solution_list li:nth-child(1)::before {content: ""; position: absolute; top: 45px;height: 25px; width: 25px;left: -35px;  background: url(../img/Polygon.png) no-repeat center / 100% auto;
}

ul.how_list {padding: 10% 10% 0 10%;  transition:  all 0.5s ease-out;  display: flex; flex-wrap: wrap;  align-items: center;}
ul.how_list li {width: 100%;  padding: 2% 1% 2% 3%;display: flex; align-items: center; }
ul.how_list li:hover {background: #1e5ff1; transition: 0.3s; color: #fff; cursor: pointer;}
ul.how_list li:nth-child(2), ul.how_list li:nth-child(4), ul.how_list li:nth-child(6) {float: right;}
ul.how_list li:nth-child(1) .icon {background-image: url(../img/how01.png);}
ul.how_list li:nth-child(2) .icon {background-image: url(../img/how02.png); background-position-x: 65%;}
ul.how_list li:nth-child(3) .icon {background-image: url(../img/how03.png);}
ul.how_list li:nth-child(4) .icon {background-image: url(../img/how04.png);}
ul.how_list li:nth-child(5) .icon {background-image: url(../img/how05.png);}
ul.how_list li:nth-child(6) .icon {background-image: url(../img/how06.png);}
ul.how_list li:nth-child(7) .icon {background-image: url(../img/how05.png);}
ul.how_list li span:nth-child(1) {   width: 100px;  display: inline-block;}
ul.how_list li:nth-child(1):hover .icon {background-image: url(../img/on_how01.png);}
ul.how_list li:nth-child(2):hover .icon {background-image: url(../img/on_how02.png);background-position-x: 65%;}
ul.how_list li:nth-child(3):hover .icon {background-image: url(../img/on_how03.png);}
ul.how_list li:nth-child(4):hover .icon {background-image: url(../img/on_how04.png);}
ul.how_list li:nth-child(5):hover .icon {background-image: url(../img/on_how05.png);}
ul.how_list li:nth-child(6):hover .icon {background-image: url(../img/on_how06.png);}
ul.how_list li:nth-child(7):hover .icon {background-image: url(../img/on_how05.png);}
ul.how_list li:hover .icon {background: #2974ff; background-repeat: no-repeat; background-position: center;}
ul.how_list li span {vertical-align: middle;  display: inline-block;}
ul.how_list {padding: 10% 0 0 3%; }
ul.how_list li {width: 50%; background-repeat: no-repeat;}  

.icon {width: 87px; height: 87px; background: #e5e5e5;vertical-align: middle;  background-position: center; background-repeat: no-repeat;  margin:0 1em 0 .5em;}

.pol_top {display: inline-block; position: relative;}
.pol_top::before {content: ""; background-image: url(../img/Polygon.png); position: absolute; top: -45%;height: 25px;width: 25px;left: 49%;transform: rotate(90deg); background-size: 100%  auto;}
.cont>div .arrows {    bottom: 0;  position: absolute;  right: 0;}

/* swiper */
#swiper_wrap {width: 200%; overflow: hidden;transform: translateX(-25%);}
.sub #swiper { transform-origin: top;padding: 4% 0 2% 0;}
.sub #swiper .text_slide { right: 6%;  bottom: 15%; color: #fff;}
.swiper-prev {background-image: url(../img/prev.png); margin-right: 0.3em;}
.swiper-next {background-image: url(../img/next.png);}
.swiper-prev, .swiper-next {width: 50px;  height: 50px;  background-position: center; background-repeat: no-repeat; background-size: 100% auto; }
.slide_img.pc {display: block;}
.slide_img.mo {display: none;}

.sub_box {width: fit-content; margin: 0 auto;}
.sub_box li {background:  #e5e5e5;}

/* company */
#section01.company p:nth-child(3){padding-right:0;}
#section01.company p.text-center, #section05.company p.text-center {text-align: center;} 
#section03.company .cont p:nth-child(2) {color:#fff;width: 67%;}
#section04.company .cont h1, #section04.company .cont p, #section04.company .cont span {display: inline-block;}
#section04.company .cont p:nth-child(2) {width: 60%;}
#section07.company .cont {padding: 11em 0; }
#section07.company .cont p:nth-child(2) {color:#fff;padding-right: 13%;}
#section07.company .bg.img {right: 0;}
#section08.company .cont>.font-100 p {white-space: nowrap;}
#section08.company .cont>.font-100 p:nth-child(1) {margin-left: -100%;}
#section08.company .cont>.font-100 p:nth-child(2) {margin-right: -100%;}
#section08.company .cont>.font-100 p:nth-child(3) {margin-left: -100%;}


/* viral */
.viral .sub_box li {width: 355px; max-height:130px;}
.viral .sub_box li:nth-child(2) {margin: 2em;}
.viral ul.how_list {padding: 4% 0 0 3%; }
.viral ul.how_list li {width: 100%; }
.viral ul.how_list li span:nth-child(3) {width: 81%;}
#section05.viral .cont {width: 80%;}

/* sns */
.sns .sub_box li {width: 23%; height:275px; padding-top: 4.375rem}
.sns .sub_box li:nth-child(2) {margin: 0 0.75em 0 1.5em; }
.sns .sub_box li:nth-child(3) {margin: 0 1.5em 0 0.75em; }
#section03.sub .cont {  width: 84%;}
#section03.sub .cont p:nth-child(2) {color:#fff;width: 67%;}


#section06.sns .cont {width: 85%;}

/* marketing */
.marketing ul.how_list li span:nth-child(3) {width: 60%;}
.marketing ul.how_list li:nth-child(4) {padding: 4% 1% 3% 3%;}

/* portfolio */
#section01.portfolio p.ptColor::after {background-image: url(../img/polygon.png);}
#tabs {padding-right: 3%;}
.tab_btn {cursor: pointer;display: inline-block;}
.tab_btn.active {color:#1e5ff1; position: relative;}
.tab_btn.active::after {content: ""; position: absolute; height: 3px; width: 100%; background: #1e5ff1;left: 0;  bottom: 0;}
.tab_btn:nth-child(1) {margin-right: 10rem;}
.pg_wrap {width: 100%;float: none;text-align: center; padding-top: 4em; }
.pg_page {color: #000; font-weight: 500; margin-left: 2px;}

.pg_page, .pg_page:hover, .pg_current {background: #fff;  border: 1px solid #1e5ff1;}
.pg_current, .pg_current:hover {  background: #000;  border: 1px solid #000; }

.pg_start, .pg_start:hover  {background: #1e5ff1 url(../img/btn_first.png) no-repeat center}
.pg_end, .pg_end:hover {background: #1e5ff1 url(../img/btn_end.png) no-repeat center}

/* #section02.portfolio.section_mini {padding: 150px 0 0 0;} */
.portfolio h1 {margin: 0 auto;}

#section05.section_mid {padding-bottom: 150px;}


/*수정*/
.side_tit {padding-right: 1rem;  display: inline-block;}

@media (max-width: 1900px){
  #section05.outsourcing .cont {width: 90%;}
}

@media (max-width: 1820px){
  .sub_box li {display: block;}

  .viral .sub_box li { width: 355px; max-height: auto;}
  .viral .sub_box li:nth-child(2) {margin: 2em 0 2em 0;}

  .marketing ul.how_list li {width: 100%;}
  .marketing ul.how_list li span:nth-child(3) {width: 75%;}

  .sns .sub_box li {    
    width: 34%;
    padding-bottom: 3em;
    padding-top: 3.125rem;
    padding-left: 3em;
    padding-right: 3em;
    display: inline-grid;
}
  .sns .sub_box li:nth-child(2) {margin: 0.75em 0 0.75em 0;}
  .sns .sub_box li:nth-child(3) {margin: 0.75em 0 0.75em 0;}

  .sns .sub_box li:nth-child(1), .sns .sub_box li:nth-child(3) {margin-right: 1em;}


  #section01.sub p.ptColor::after {height: 150%;background-size: auto 100%; }
}

@media (max-width: 1580px){
  #section01.sub p.ptColor::after {top: -25%;}
  
  .viral ul.how_list {padding-left: 0;}
  .viral ul.how_list li span:nth-child(3) {width: 75%;}

  #section03.company .cont p:nth-child(2), #section03.sub .cont p:nth-child(2) {width: 80%;}

  .side_tit {padding-right: 0;}
}


@media (max-width: 1240px){


  ul.how_list {padding: 3em 0 0 0;}
  ul.how_list li span:nth-child(1) {width: 70px;}
  .icon {width: 57px; height: 57px;background-size: 60% auto; }

  .marketing ul.how_list li:nth-child(4) {width: 100%; padding: 4% 1% 4% 3%;}
  .viral ul.how_list li span:nth-child(3),.marketing ul.how_list li span:nth-child(3) {width: 70%;}

  #section03.sub .cont {padding: 16rem 0;     width: 94%;}

}

@media (max-width: 990px){
#header.sub.open #logo .sub_logo {display: none;}
#header.sub.open #logo .main_logo {display: block;}
#header.sub .menu-btn__burger,#header.sub .menu-btn__burger::before,	#header.sub .menu-btn__burger::after  {	background: #000;}	
#header.sub.active .menu-btn__burger,#header.sub.active .menu-btn__burger::before,	#header.sub.active .menu-btn__burger::after {	background: #fff;}	

#header.sub.open *, #header.sub.open .side_btn li a, #header.sub.open .side_btn li a {color: #fff;}
#header.sub.open .header_wrap .side_btn li::after, #header.sub.open .header_wrap .menu li .submenu li.active:hover::before,  #header.sub.open .menu-btn__burger::before,  #header.sub.open .menu-btn__burger::after, #header.sub.open .menu-btn.open .menu-btn__burger  {background: #fff;}
#header.sub.open .menu-btn.open .menu-btn__burger {transform: translateX(-50px);background: transparent;}

.font-80 {font-size: 4.375rem} 

.sub_tit {  letter-spacing: 0;  font-weight: 400;  font-size:3.750rem;}
.sub_tit::before {content: ": "; display: inline;}
.underline>.underline::after {display: inline;}

span.line.l_03, #section04.company .cont span.line.l_04,
span.line.l_05 { width: 17%;}
span.line {  margin-bottom: 0.3em;}


ul.solution_list li {width: 100%;}
ul.solution_list:nth-child(2),ul.solution_list:nth-child(4) {padding-right: 0;padding-bottom: 100px;width: 50%;  float: right;}
ul.solution_list:nth-child(3) {  padding-left: 0;  padding-bottom: 150px;}
ul.solution_list li:nth-child(1)::before {top: 25px;  height: 15px;  width: 15px;  left: -20px;		}

.pol_top::before {height: 17px;  width: 17px;}
.swiper-prev, .swiper-next {width: 35px;  height: 35px;}



#section01.sub p.ptColor::after {background-size: auto 50%;}
#section03.sub .cont p:nth-child(2){width: 75%;padding-right: 0; padding-top: 5%;}
#section03.sub .cont {padding: 12rem 0;}
#section04.sub .cont {width: 90%;  padding-left: 5%;}


#section01.company p:nth-child(3){padding-right:6%;}
#section01.company p.text-center, #section05.company p.text-center {text-align: right;}
#section03.company {padding-top:0 ;}
#section03.company .cont p:nth-child(2),#section07.sub.company .cont p:nth-child(2){width: 75%;padding-right: 0; padding-top: 5%;}
#section04.company .cont p {vertical-align: middle;}
#section08.company .cont {width: auto;}
#section08.company .cont>.font-100 {font-size: 9rem;}



#section03.marketing .cont {padding: 4rem 0;}

.sns .sub_box li {    width:44%;height: 200px;}

.slide_img.pc {display: none;}
.slide_img.mo {display: block;}


}


@media (max-width: 768px){
  .font-80 {font-size: 4.0625rem;}

  #swiper_wrap {width: 280%;transform: translateX(-32%);}

  ul.how_list li {width: 100%; padding: 4% 1% 4% 3%;}
  .viral ul.how_list li span:nth-child(3) {width: 65%;}


  #section03.sub .cont {padding: 7rem 0;}

  #section03.marketing .cont {padding: 10rem 0;}
  #section02.portfolio.section_mini {padding: 100px 0 0 0;}
  #section02.portfolio {font-size: 3.0625rem;}
  #section04.company.section_mini {padding: 150px 0 50px 0;}

  .pg_current, .pg_page {font-size: 1.5rem;}
  .sns .sub_box li {height:175px;width: 70%;}
  .sns .sub_box li:nth-child(2) {    margin: 0.75em 0 0 0;}
  .sns .sub_box li:nth-child(1), .sns .sub_box li:nth-child(3) {margin-right: 0;}


}

@media (max-width: 600px){
  .bg.img.pc {display: none;}
  .bg.img.mo {display: block;width: 75%; height: auto;}

  /* #section05.sub .cont:not(#section05.company .cont) {width: 100%;} */
  #section03.marketing .cont {padding: 6rem 0;}
  #section03.company .cont {padding: 12rem 0;}

  #section05.viral .cont {width: 95%;}

  .sns .sub_box li {height:175px;width: 100%;}


}

@media (max-width: 480px){
  #main {display: block;}
  #logo .main_logo {display: block;}
  #logo .sub_logo {display: none;}
  #header.sub .menu-btn__burger, #header.sub .menu-btn__burger::before, #header.sub .menu-btn__burger::after {background: #fff;}

  .how_list p:nth-child(2) {line-height: inherit;}

  .bg.img.mo {  width: 88%;}

  #section03.marketing .cont {  padding: 4rem 0;}
  .tab_btn:nth-child(1) {    margin-right: 5rem;}

  ul.solution_list:nth-child(1),  ul.solution_list:nth-child(2),  ul.solution_list:nth-child(3){padding-bottom: 50px;}

}

@media (max-width: 375px){
  .font-80 {font-size: 3.125rem;}
  .font-38 {font-size: 2rem;}

  .bg.img.mo {width: 90%; }

  .sub_tit {font-size: 3.125rem;}
  .line_break.ex {display: none;}

  .icon {  margin: 0 0.5em 0 0.1em; width: 47px;  height: 47px;}

  .section_max {
    padding: 310px 0;
}

  ul.how_list p {  font-size: 2.125rem;}
  ul.how_list li span:nth-child(1) {width: 45px;}

  .viral ul.how_list li span:nth-child(3), .marketing ul.how_list li span:nth-child(3) {width: 60%;}

  #section04.company.section_mini {padding: 150px 0 0 0;}

  #section01.company p:nth-child(3) {  padding-right: 0;}
  #section03.sub .cont {padding: 7rem 0;}
  #section03.marketing .cont {  padding: 0.5rem 0;}
  #section03.sns .cont {padding: 3rem 0;}

}