@charset 'utf-8';
/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
/*reset*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "SCoreDream";
  font-weight: 400;
}


ol,
ul {
  list-style: none;
}

input[id="icon"] {
  display:none;
}
a {
  font-family: "SCoreDream";
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color:inherit;
 }
 .swiper-pagination-bullet{
  background-color: #fff;
  opacity: .5;
}
#wrap > ul > li.swiper-pagination-bullet.swiper-pagination-bullet-active{
  opacity: 1;
}

 html,
      body {
        position: relative;
        height: 100%;
      }
      .swiper {
        z-index: 1002;
        width: 100%;
        height: 100%;
      }
      ul.swiper-pagination{ width:180px;}
      ul.swiper-pagination li{width: 100%; height: 2rem; background: transparent;}
      ul.swiper-pagination li a{width: 100%; display: block;}
      ul.swiper-pagination li a span{width: 100%; display: block; font-size: 1.1rem; font-weight: 700; color: #fff;}
      #wrap > .swiper-pagination{transition: 0.7s;}
      @media screen and (min-width:1025px) {
        #wrap > .swiper-pagination.is-scroll{ width: 40%; top:60px; right: 90px; display: flex;}
      }
    @media screen and (max-width: 1024px){
      .swiper {z-index: 900; border: 0px solid blue; }
      #wrap > .swiper-pagination{right: -400px; transition: 0.7s;}
      #wrap > .swiper-pagination.is-active{
        width: 100%;
        padding-top: 15%;
        height: 100vh;
        transform: translate(0,-20%) ;
        top: 20%;
        right: 0%;
        border: 0px solid red;
        background-color: #f91237;
        opacity: 1;
      }
      
      
  }
/*
.panel {
  position: relative;
  height: calc(var(--vh, 1vh) * 100);  
  height: 100vh;
  overflow: hidden;
 padding: 1em; 수정했음
  box-sizing: border-box;
  color: hsla(0, 0%, 100%, 0.1);
  cursor: default;
}

.panel:nth-child(1) {
}

.panel:nth-child(2) {
}

.panel:nth-child(3) {
}

.panel:nth-child(4) {
}

.panel:nth-child(5) {
}*/


@font-face {
  font-family: "SCoreDream";
  font-weight: 400;
  font-style: normal;
  src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff)
      format("woff");
  font-display: swap;
}


@font-face {
  font-family: "SCoreDream";
  font-weight: 700;
  font-style: normal;
  src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff)
      format("woff");
  font-display: swap;
}

/*common*/
/*PC style*/
header {
  width: 87.5%;
  /*width: 100%;수정했음*/
  /*height: 100%;수정했음*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

header h1 {
  position: absolute;
  padding-top: 50px;
  z-index: 2000;
  border: #03c75a 0px solid;
}
header h1 img{
  width: 3vw;
}

/* COLUMNS */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-of-type {
  margin-left: 0;
}





/* ALL */
div.row {
  display: none;
  position: fixed;
  top: 5%;
  right: 3%;
  z-index: 2000;
}
.row .three{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  border: 0px solid red;
}

.hamburger .menu-line{
  width: 50px;
  height: 5px;
  background-color: #fff;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

/* ONE */

#hamburger-1.mob-active .menu-line:nth-child(2){
  opacity: 0;
}

#hamburger-1.mob-active .menu-line:nth-child(1){
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}

#hamburger-1.mob-active .menu-line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}

header.is-scroll {
  height: auto;
  position: fixed;
  top: 7%;
  right: 2%;
  transform: translateY(-50%);
  z-index: 1001;
  cursor: pointer;
  color: #fff;
  transition: none; /* 추가 */

}

header.is-scroll ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  border: 0px yellow solid;
}

header.is-scroll ul li {
  width: 120px;
  text-align: center;
  list-style: none;
  padding-right: 1%;
  margin: 0;
  color: inherit;
  border: 0px solid red;
}


header.is-scroll ul li a {
  color: #fff;
}

header.is-scroll ul li a.scroll-action {
  color: #fff;
  font-weight: 600;
}
/*애니메이션 효과*/
@keyframes fadein {
  from {
      opacity: .5;
  }
  to {
      opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
  }
  to {
      opacity: 1;
      transform: translateZ(0);
  }
}

@keyframes fadeInTop {
  0% {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
  }
  to {
      opacity: 1;
      transform: translateZ(0);
  }
}
@keyframes rotate_image{
  100% {
      transform: rotate(360deg);
  }
}

@keyframes fadeInRight {
  0% {
      opacity: 0;
      transform: translate3d(20%, 100%, 0);
  }
  to {
      opacity: 1;
      transform: translateZ(0);
  }
}
@-webkit-keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

/*애니메이션 효과 끝*/










.outer {
  width: 75%;
  height: 100vh;
  margin: 0 auto;
  border: 0px solid cyan;
  font-family: "SCoreDream";
  font-weight: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: transparent;
}


.main-stitle {
  font-size: 2.3vw;
  text-align: center;  
  font-weight: 700;
  line-height: 1;
  border: 0px solid orange;
}
#main-visual {
  position: relative;
  width: 100%;
  /*height: 100%; 수정했음*/
  margin: 0 auto;
  background: url(../../../images/main_bg_01.jpg) no-repeat center top;
  background-size: cover;
  color: #fff;
  animation: fadein 3s;
}


#main-visual .inner{
  width: 75%;
  margin: 0 auto;
}

.r_squre{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -10;
  width: 51%;
  height: 27%;
  border-radius: 0 150px 0 0 ;
  background-color: #f91237;
  animation: fadeInLeft 2s;

}

.ring{
position: absolute;
  top: -100px;
  left: -100px;
  z-index: -11;
  animation: fadeInTop 2s;
}

.ring img{
  width: 90%;
}





#main-visual .main-text {
  margin: 0 auto;
  padding: 20% 0;

}
#main-visual .main-text span{
  display: inline-block;
  font-size: 2vw;
  font-weight: 400;
  padding: 10px 0;
  border: 0px solid gainsboro;
}
#main-visual .main-text h2{
  font-weight: 700;
  line-height: 1.1;
  font-size: 3.3vw;
  color: #f91237;
  border: 0px solid gainsboro;
}
#main-visual .main-text h2:last-child{
  font-size: 3.3vw;
  font-weight: 700;
  color:transparent;
  -webkit-text-stroke: 2px #f91237;
}
#main-visual .r_squre .redbox_text{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: flex-start;

}

#main-visual .r_squre p {
  width: 26vw;
  font-size: 1.25vw;
  line-height: 1;
  animation: fadeInLeft 2s;
  border: 0px solid green;
}

#main-visual .r_squre h5 {
  width: 26vw;
  font-weight: 700;
  font-size: 1.8vw;
  animation: fadeInLeft 2s;
  border: 0px solid skyblue;
}

/*---------------------------광고상품---------------------------*/

#con01 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center; 
  background: url(../../../images/main_bg_02.jpg) no-repeat center top;
  background-size: cover;
  color: #fff;
  animation: gradient 15s ease infinite;
}

#con01 .inner {
  width: 88%;
  margin: 0 auto;
  
}
#con01 .main-stitle {
  color: #444;
}
#con01 .outer .inner .mob-product{
  display: none;
}

#con01 .bg_circle {
  width: 500px;
  height: 500px;
  border:0px solid salmon;
  position: absolute;
  right: -5%;
  bottom: -11%;
  background: url(../../../images/bg_circle.png) no-repeat center top;
  background-size:contain;
  animation: rotate_image 20s linear infinite;
}
#con01 .product-list {
  width: 100%;
  padding: 50px 0;
  margin: 0 auto;
  border: 0px solid orchid;
}

#con01 .product-list ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
  border: 0px solid yellow;
  margin: 0 auto;
  justify-content: center;
}
#con01 .product-list ul li {
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 19.5vw;
  height: 32vh;
  padding: 30px;
  margin-left:5.4%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}


#con01 .product-list ul li .gra-ound{
  width: 150px;
  height: 150px;
  border-radius: 150px;
  background: radial-gradient(transparent);

}
#con01 .product-list ul li:hover .gra-ound{
  position: absolute;
  right: -7%;
  bottom: -7%;
  width: 130px;
  height: 130px;
  border-radius: 130px;
  background: radial-gradient(transparent, #444);
  animation: fadeInRight 1s;
}
#con01 .product-list ul li:hover {
  background: #222;
  transition: 1s;
  box-shadow: 0 0 15px 0 rgba(0,0,0,.6);
}

#con01 .product-list ul li:nth-child(1),
#con01 .product-list ul li:nth-child(4){
 margin-left: 0%;
}
#con01 .product-list ul li:nth-child(4),
#con01 .product-list ul li:nth-child(5),
#con01 .product-list ul li:nth-child(6){
  margin-top: 1.5%;
}


#con01 .list-red{
  display: flex;
  border: #03c75a 0px solid ;
}
#con01 .product-list ul li .red-dot{
  width: 10px;
  height: 10px;
  background-color: #f91237;
  border-radius: 10px;
  margin: 2.5% 3% 2.5% 0%;
  }


#con01 .product-list ul li h3 {
  font-family: "SCoreDream";
  font-weight: 700;
  font-size: 0.9vw;
  color: #f91237;
}


#con01 .product-list ul li .red-line{
  width: 63%;
  height: 0;
  border-bottom: 1px solid #f91237;
  margin: 3.5% 0% 3.5% 5%;
  }

  #con01 .product-list ul li:nth-child(2) .red-line,
  #con01 .product-list ul li:nth-child(3) .red-line,
  #con01 .product-list ul li:nth-child(4) .red-line{
    width: 59%;
  }
  #con01 .product-list ul li:last-child .red-line{
    width: 48%;
  }

#con01 .product-list ul li .pro_text {
  display: block;
  width: 100%;
  font-weight: 700;
  font-size: 1.5vw;
  color: #222;
  line-height: 2.5;
  text-align: left;
  border: #ff654a 0px solid;
}
#con01 .product-list ul li:hover .pro_text {
  color: #fff;
  transition: 1s;
}


#con01 .product-list ul li .pro_detail {
  font-size: 0.7vw;
  color: #777;
  word-break: keep-all;
}

#con01 .custom-btn-3 {
  position: absolute;
  left: 30px;
  bottom: 30px;
  width: 40%;
  height: 30px;
  border: 1px solid #444;
  background-color: #444;
  cursor: pointer;
  border-radius: 25px;
  font-size: 0.7vw;
  opacity: 0;
}

#con01 .custom-btn-3:before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
  opacity: 0;
}

#con01 .custom-btn-3 a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500,bold;
  width: 100%;
  height: 100%; 
  color: #fff;
  transition: 0.2s;
  text-decoration: none;
  border-radius: 25px;
  
}
#con01 .product-list ul li:hover .custom-btn-3{border: 0px solid #f91237;transition: 0.3s ease-in; opacity: 1;}
#con01 .product-list ul li:hover .custom-btn-3 a {
  font-weight: 500;
  color: #fff;
  transition: 0.2s;
  background-color: #f91237;
  
}


#con01 .custom-btn-3.hover-opacity::before {
  top:0; bottom: 0; right: 0;
  height: 100%; 
  width: 100%;
  opacity: 0;
}
#con01 .custom-btn-3.hover-opacity:hover::before {
  opacity: 1;
  
}
/*---------------------------레퍼런스---------------------------*/
#con02 {
  width: 100%;
  /*height: calc(var(--vh, 1vh) * 100);*/ 
  /*height: 100%; 수정했음*/
  /*margin: 0 auto;
  text-align: center;
  background-size: cover;
  color: #fff;*/
  width: 100%;
  height: 100%;
  background: url(../../../images/main_bg_03.jpg) no-repeat center top;
  background-size: cover;
  color: #000;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}


.lines{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
}
  

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  
}
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 50%, #ffffff 100%);
  -webkit-animation: drop 5s 0s infinite;
          animation: drop 5s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0.46, 0, 0.97);
          animation-timing-function: cubic-bezier(0.6, 0.46, 0, 0.97);
}
.line:nth-child(1) {
  margin-left: -25%;
}
.line:nth-child(1)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.line:nth-child(3) {
  margin-left: 25%;
}
.line:nth-child(3)::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}



#con02 .main-stitle {
  color: #444;
}

#con02 .mob-refer-list {
  display: none;
}
.guide_list {
  width: 100%; 
  display: flex;
  align-items: flex-start; 
  justify-content: space-between;
  padding: 50px 0;
} 
.guide_list li {
  width: calc(100% / 3 - 60px);
  max-width: 320px;
} 
.guide_list li a {
  display: block; width: 100%;
  height: 440px;
  position: relative;
  transition: all .4s ease-in-out;
} 
.guide_list li:nth-child(even) {
  margin-top: 40px;
} 
.guide_list li a .bg {
  position: absolute; 
  top: 0px; 
  left: 0px; 
  height: 100%; 
  width: 100%; 
  z-index: 0; 
  filter: grayscale(100%); 
  overflow: hidden; 
  border-radius: 50px 0 50px 0; 
  transition: all .4s ease-in-out; 
} 
.guide_list li a:hover {
  margin-top: -5px;
  transition: all .4s ease-in-out;
}
.guide_list li a:hover .bg { filter: grayscale(0%);} 
.guide_list li:nth-child(even) a .bg { border-radius: 0 30px 0 30px; } 
.guide_list li a > span {
  font-size: 20px; 
  font-family: "SCoreDream"; 
  font-weight: 700; 
  bottom: 30px; 
  left: 30px; 
  z-index: 1; 
  display: block; 
  position: absolute; 
  color: #fff; 
} 
.guide_list li a .plus_icon {
  display: block; 
  position: absolute; 
  width:40px; 
  height: 40px; 
  bottom: 30px; 
  right: 20px; 
  z-index: 1; 
}
.guide_list li a .plus_icon:before,
.guide_list li a .plus_icon:after{
  position: absolute; 
  left: 15px;
  content:' ';
  height: 40px; 
  width: 2px; 
  background-color: #f91237;
}
.guide_list li a .plus_icon:after {transform: rotate(-90deg);}
.guide_list li.n1 a .bg { background: url(../../../images/main_refer_01.png) center top no-repeat; background-size: cover;} 
.guide_list li.n2 a .bg { background: url(../../../images/main_refer_02.png) center top no-repeat; background-size: cover;} 
.guide_list li.n3 a .bg { background: url(../../../images/main_refer_03.png) center top no-repeat; background-size: cover;} 
.guide_list li.n4 a .bg { background: url(../../../images/main_refer_04.png) center top no-repeat; background-size: cover;} 
.guide_list li.n1 a:hover .bg { background: url(../../../images/main_refer_01.png) center top no-repeat; background-size: cover;} 
.guide_list li.n2 a:hover .bg { background: url(../../../images/main_refer_02.png) center top no-repeat; background-size: cover;} 
.guide_list li.n3 a:hover .bg { background: url(../../../images/main_refer_03.png) center top no-repeat; background-size: cover;} 
.guide_list li.n4 a:hover .bg { background: url(../../../images/main_refer_04.png) center top no-repeat; background-size: cover;} 
.guide_list li a .on_box {
  background: #fff; 
  border-radius: 50px 0 50px 0; 
  position: absolute; 
  bottom: -70px; 
  left: -10px; 
  width: calc(100% - 10px); 
  padding: 30px 30px; 
  z-index: 2; 
  overflow: hidden; 
  opacity: 0; transition: all .4s ease-in-out; 
 -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
  box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
} 
.guide_list li a:hover .on_box { 
 opacity: 1; } 
.guide_list li:nth-child(even) a .on_box { border-radius: 0 50px 0 50px; } 
.guide_list li a .on_box:after { content: ""; position: absolute; width: calc(100% - 130px); height: 1px; background: #f91237; bottom: 38px; left: 35px; opacity: 1; 
} 
.guide_list li a .on_box strong { font-size: 1vw; display: block; font-family: "SCoreDream"; font-weight: 700; color: #222; margin-bottom: 10px; } 
.guide_list li a .on_box span { font-size: .8vw; color: #777; display: block; margin-bottom: 30px; word-break: keep-all;} 
.guide_list li a .on_box em { display: block; position: absolute; font-size: 0.9vw; font-style: normal; font-weight: 700; color: #f91237; bottom: 25px; right: 30px; z-index: 3; } 


/*---------------------------솔루션---------------------------*/
#con03 {
  width: 100%;
  /*height: calc(var(--vh, 1vh) * 100);*/  
  /*height: 100%; 수정했음*/
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(180deg, #d4d1cb 0%, #ebe7e1 100%);
  background-size: cover;
  color: #fff;
  overflow: hidden;
}
#con03 .main-stitle {
  color: #444;
}

#con03 .MOB_sol-list{
  display: none;
}


#con03 .credit {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #000;
}
#con03 .options {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  margin: 0 auto;
  min-width: 980px;
  width: 100%;
  padding: 50px 0;
  height: 540px;
}


#con03 .options .option {
  position: relative;
  overflow: hidden;
  min-width: 200px;
  margin: 10px;
  background-position: center;
  cursor: pointer;
  transition: 0.6s;
}

#con03 .options .option:nth-child(1) {
  background: url(../../../images/main_sol_01.png) no-repeat center ;
  background-size: cover;
}
#con03 .options .option:nth-child(2) {
  background: url(../../../images/main_sol_02.png) no-repeat center;
  background-size: cover;
}
#con03 .options .option:nth-child(3) {
  background: url(../../../images/main_sol_03.png) no-repeat center;
  background-size: cover;
}
#con03 .options .option:nth-child(4) {
  background: url(../../../images/main_sol_04.png) no-repeat center;
  background-size: cover;
}
#con03 .options .option a{
  pointer-events: none;
}
#con03 .options .option.active {
  flex-grow: 10000;
  -webkit-transform: scale(1);
          transform: scale(1);
  max-width: 980px;
  margin: 10px;
  border-radius: 20px;
  background-size: cover ;
  /*&:active {
     transform:scale(0.9);
  }*/
}
#con03 .options .option.active a{
  pointer-events:visible;
}
#con03 .options .option.active .red-bg {
  background-color: transparent;
}

#con03 .options .option.active .red-t {
  display:none;
}
#con03 .options .option.active .shadow {
  box-shadow: rgba(0, 0, 0, 0.8) 0px -200px 100px -90px inset;
}
#con03 .options .option.active .label {
  bottom: 20px;
  left: 20px;
}
#con03 .options .option.active .label .info > div {
  left: 0px;
  opacity: 1;
}
#con03 .options .option:not(.active) {
  flex-grow: 1;
  border-radius: 20px;
}
#con03 .options .option:not(.active) .shadow {
  bottom: -40px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px -200px 100px -90px inset;
}
#con03 .options .option:not(.active) .label {
  bottom: 10px;
  left: 10px;
}
#con03 .options .option:not(.active) .label .info > div {
  left: 20px;
  opacity: 0;
}
#con03 .options .option .shadow {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 350px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
#con03 .options .option .label {
  display: flex;
  position: absolute;
  right: 0px;
  height: 40px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
#con03 .options .option a .red-bg {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(249,18,55,.8);
}

#con03 .options .option a .red-t {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1vw;
  font-weight: 700;
}

#con03 .options .option .label .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: white;
  white-space: pre;
}
#con03 .options .option .label .info > div {
  position: relative;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
#con03 .options .option .label .info .main {
  font-size: 1vw;
  font-weight: 700;
  border: 0px solid yellow;
}

#con03 .options .option .label .info .sub {
  transition-delay: .1s;
}


/*---------------------------문의하기 & 푸터---------------------------*/

#con04 {
  position: relative;
  width: 100%;
  /*height: calc(var(--vh, 1vh) * 100);*/  
  /*height: 100%; 수정했음*/
  margin: 0 auto;
  text-align: center;
  background: #222;
  background-size: cover;
  color: #fff;
  border: 0px solid yellow;
}
#con04 .outer {
  width: 87.5%;
  height: 80vh;
}

#con04 .outer span.cstext {
  display: inline-block;
  padding: 90px 0 100px 0;
  font-size: 2em;
  line-height: normal;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
  border: 0px solid red;
  word-break: keep-all;
}

button {
  margin: 0 auto; 
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: 2rem;
  font-family: "SCoreDream";
  font-weight: 700;
}
button.learn-more {
  width: 20rem;
  height: 4rem;
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 2rem;
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 4rem;
  height: 4rem;
  background: #f91237;
  border-radius: 2rem;
}
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 1rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0525rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  font-family: "SCoreDream";
  font-weight: 700;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 0;
  margin: 0 0 0 1.50rem;
  color: #444;
  line-height: 1;
  text-align: center;
  font-size: 2rem;
  text-transform: none;
}
button:hover .circle {
  width: 100%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
button:hover .button-text {
  color: #fff;
}

#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 3% 0;
  background: #444;
  color: #fff;
}

#footer .f_outer {
  width: 87.5%;
  margin: 0 auto;
  border: 0px solid yellow;
  
}

#footer .foot_left {
  display: inline-block;
  width: 49.5%;
  text-align: left;
  border: 0px solid green;

}

#footer .foot_left address {
  font-family: "SCoreDream";
  text-decoration: none;
  font-style: normal;
  font-size: 1em;
}

#footer .foot_right {
  display: inline-block;
  width: 49.5%;
  font-weight: 700;
  border: 0px solid red;
}
#footer .foot_right span {
  display: block;
  text-align: right;
  font-family: "SCoreDream";
  text-decoration: none;
  font-size: 1.5em;
  line-height: normal;
  font-style: normal;
}
#footer .foot_right span a {
  color: #fff;
  font-family: "SCoreDream";
  font-weight: 700;
  text-decoration: none;
}





/*--------------미디어쿼리 1366px--------------*/
@media all and (max-width:1366px){

  header h1 img{
    width: 60px;
  }
  header .nav-menu ul li {
    font-size: .9em;
  }
  header.is-scroll {
    right: 1%;


  }
  header.is-scroll ul li{
    width: 100px;
  }



/*--------------메인비주얼--------------*/
  #main-visual .main-text ul li > h2,
  span {
    font-size: 2.5vw;
   line-height: 3rem;
  }

  #main-visual .main-text ul li img {
    padding: 3em 0;
    width: 18%;
  }
  #main-visual .main-text ul li p {
    font-size: large;
  }
  
  #main-visual .main-text ul li h5 {
    font-size: large;
  }
  .main-stitle {
    font-size: 2.5vw;
    font-weight: 700;
  }

  .ring{
    position: absolute;
      top: -150px;
      left: -150px;
      z-index: -11;
      animation: fadeInTop 2s;
    }
    
    .ring img{
      width: 70%;
    }



/*---------------------------광고상품---------------------------*/
  #con01 .product-list {
    padding: 30px 0;
  }

  #con01 .product-list ul li {
    width: 19vw;
    height: 29vh;
    padding: 20px;
    margin-left: 5%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  #con01 .product-list ul li .red-dot{
    width: 10px;
    height: 10px;
    background-color: #f91237;
    border-radius: 10px;
    margin: 2.5% 3% 2.5% 0%;
    }
  
  #con01 .product-list ul li h3 {
    width: 35%;
    font-family: "SCoreDream";
    font-weight: 700;
    font-size: 0.9vw;
    color: #f91237;
    border: 0px solid gold;
  }
  #con01 .product-list ul li:last-child h3{
    width: 55%;
  }
#con01 .product-list ul li .red-line{
  width: 75%;
  height: 0;
  border-bottom: 1px solid #f91237;
  margin: 3.5% 0% 3.5% 5%;
  }
  #con01 .product-list ul li:last-child .red-line{
    width: 60%;
  }
  #con01 .product-list ul li .pro_text {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 1.5vw;
    color: #222;
    line-height: 2.5;
    text-align: left;
    border: #ff654a 0px solid;
  }

  
  #con01 .product-list ul li .pro_detail {
    font-size: 0.8vw;
    color: #777;
    word-break: keep-all;
  }
  #con01 .product-list ul li .custom-btn-3 {
    width: 110px;
    height: 25px;
    left: 20px;
    border-radius: 20px;
    opacity: 0;
  }
  #con01 .product-list ul li:hover .custom-btn-3{
    transition: 0.3s ease-in;
    opacity: 1;}

  #con01 .custom-btn-3 a {
    font-size: .8vw;
  }




/*---------------------------레퍼런스---------------------------*/
.guide_list {
 padding: 30px 0;
}
.guide_list li {
  width: calc(100% / 3 - 30px);
  max-width: 240px;
} 
.guide_list li a {
  height: 350px;
}
.guide_list li a > span {
  font-size: 17px; 
  font-family: "SCoreDream"; 
  font-weight: 700; 
  bottom: 20px; 
  left: 20px; 
} 
.guide_list li a .plus_icon {
  width: 30px; 
  height: 30px; 
  bottom: 30px; 
  right: 20px; 
}
.guide_list li a .plus_icon:before,
.guide_list li a .plus_icon:after{
  height: 30px; 
}
.guide_list li a .on_box {
  width: calc(100% - 8px); 
  height: 150px;
  bottom: -50px;
  padding: 30px;
}
.guide_list li a:hover .on_box { 
  opacity: 1; 
} 
 .guide_list li:nth-child(even) a .on_box {
  border-radius: 0 50px 0 50px;
} 
 .guide_list li a .on_box:after {
  width: calc(100% - 120px);
  left: 30px; 
} 
 .guide_list li a .on_box strong {
  font-size: 1.3vw; 
  margin-bottom: 5px; 
  border: 0px solid green;
} 
 .guide_list li a .on_box span { 
  font-size: .8vw; 
  margin-bottom: 30px;
  line-height: 1.5;
  border: 0px solid salmon;
} 
 .guide_list li a .on_box em {
  font-size: 1vw;
  bottom: 25px;
  right: 30px;
} 
 

/*---------------------------솔루션---------------------------*/
#con03 .options {
  padding: 30px 0;
  height: 500px;
}
   #con03 .MOB_sol-list{
    display: none;
  }

  #con03 .options .option {
    min-width: 140px;
  }
  #con03 .options .option .label .info .main {
    font-size: 1.5vw;
    border: 0px solid yellow;
  }
   
/*---------------------------문의하기 & 푸터---------------------------*/
#con04 .outer span.cstext {
  padding: 50px 0 60px 0;
  font-size: 1.5em;
}

#footer .f_outer {
  border: 0px solid red;
}

#footer .foot_left address {
  font-size: .8em;
}
#footer .foot_right span {
  font-size: 1.2em;
}

}

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 

@media (max-width:1024px) {
  .outer {
    width: 90%;
  }
  
  .main-stitle {
    font-size: 4.3vw;
  }
  header {
    width: 90%;
  }

  div.row {
    display: block;
    position: fixed;
    top: 40px;
    right: 50px;
  }

  .hamburger .menu-line{
    width: 74px;
    height: 7px;
    margin: 6px auto;
  }
  header h1 img{
    width: 10vw;
  }
  header.is-scroll {
    position:absolute;
    top: 0;
    right: 0;
    border: 0px tomato solid;
    transform: translateY(0%);
    z-index: 1001;
    cursor: pointer;
    color: #fff;
    transition: none; 
  
  }
  header.is-scroll ul {
    display: block;
    flex-direction: unset;
  }
  header.is-scroll ul li{
    width: 100%;
  }

  ul.swiper-pagination li{width: 100%; height: 5rem; background: transparent;}
  ul.swiper-pagination li a span{font-size: 4vw;}

  .r_squre{
    width: 80%;
    height: 25%;
    border-radius: 0 200px 0 0 ;
  }

  .ring{
    left: -300px;
  }

  .ring img{
    width: 90%;
  }
  #main-visual .inner{
    width: 80%;
    margin: 0 auto;
  }

  #main-visual .main-text {
    padding: 45% 0;
  
  }
  #main-visual .main-text span{
    font-size: 4vw;
    padding: 15px 0;

  }
  #main-visual .main-text h2{
    font-size: 7vw;
  }
  #main-visual .main-text h2:last-child{
    font-size: 7vw;
  }
  #main-visual .r_squre .redbox_text{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
  
  }
  
  #main-visual .r_squre p {
    width: 55vw;
    font-size: 3vw;
    line-height: 1.2;
    animation: fadeInLeft 2s;
    border: 0px solid green;
  }
  
  #main-visual .r_squre h5 {
    width: 55vw;
    font-weight: 700;
    font-size: 4.5vw;
    animation: fadeInLeft 2s;
    border: 0px solid skyblue;
  }
/*---------------------------광고상품---------------------------*/
#con01 .bg_circle {
  width: 500px;
  height: 500px;
  border:0px solid salmon;
  position: absolute;
  right: -7%;
  bottom: 5%;
  background: url(../../../images/bg_circle.png) no-repeat center top;
  background-size:contain;
  animation: rotate_image 20s linear infinite;
}

  #con01 .outer .inner > .product-list{
    display: none;
  }
  #con01 .outer .inner .mob-product{
  display: block;
 }

 #con01 .outer .inner {
  width: 100%;
 }
 
#con01 .outer .inner .mob-product{
  width: 100%;
  padding: 50px 0;
  margin: 0 auto;
  border: 0px solid orchid;

}

#con01 .outer .inner .mob-product div ul{
  border: 0px solid yellow;
  overflow: hidden;
}
#con01 .outer .inner .mob-product div ul li {
  text-align: left;
  height: 30vh;
  padding: 30px;
  margin: 0%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#con01 .outer .inner .mob-product div ul li .gra-ound{
  width: 170px;
  height: 170px;
  border-radius: 170px;
  background: radial-gradient(transparent);
  box-shadow: none;
}

#con01 .outer .inner .mob-product div ul li:hover .gra-ound{
  position: absolute;
  right: -7%;
  bottom: -7%;
  width: 170px;
  height: 170px;
  border-radius: 170px;
  background: radial-gradient(transparent, #444);
  animation: fadeInRight 1s;
  box-shadow: none;
}

#con01 .outer .inner .mob-product div ul li:hover {
  background: #222;
  transition: 1s;
}



#con01 .mob-product div ul li .list-red{
  display: flex;
  border: #03c75a 0px solid ;
}
#con01 .mob-product div ul li .red-dot{
  width: 20px;
  height: 17px;
  background-color: #f91237;
  border-radius: 20px;
  margin: 1% 0% 0% 0%;
  }


#con01 .mob-product div ul li h3 {
  width: 35%;
  font-family: "SCoreDream";
  margin-left: 3%;
  font-weight: 700;
  font-size: 2vw;
  color: #f91237;
}

#con01 .mob-product div ul.meta li h3 {
   width: 50%;
}
#con01 .mob-product .red-line{
  width: 65%;
  height: 0;
  border-bottom: 1px solid #f91237;
  margin: 4.5% 0% 0% 5%;
  }
  #con01 .mob-product div ul.meta li .red-line{
    width: 50%;
  }
  #con01 .mob-product div ul.viral li .red-line{
    width: 75%;
  }
#con01 .mob-product div ul li .pro_text {
  display: block;
  width: 100%;
  font-weight: 700;
  font-size: 3vw;
  color: #222;
  line-height: 2.5;
  text-align: left;
  border: #ff654a 0px solid;
}
#con01 .mob-product div ul li:hover .pro_text {
  color: #fff;
  transition: 1s;
}


#con01 .mob-product div ul li .pro_detail {
  font-size: 2vw;
  color: #777;
  word-break: keep-all;
}

#con01 .mob-product div ul li .custom-btn-3 {
  position: absolute;
  left: 30px;
  bottom: 50px;
  width: 45%;
  height: 40px;
  border: 1px solid #444;
  background-color: #444;
  cursor: pointer;
  border-radius: 25px;
  opacity: 1;
}

#con01 .custom-btn-3:before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
}

#con01 .custom-btn-3 a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500,bold;
  width: 100%;
  height: 100%; 
  color: #fff;
  font-size: 1.5vw;
  transition: 0.2s;
  text-decoration: none;
  border-radius: 25px;
}
#con01 .mob-product div ul li:hover .custom-btn-3{border: 0px solid #f91237}
#con01 .mob-product div ul li:hover .custom-btn-3 a {
  font-weight: 500;
  color: #fff;
  transition: 0.2s;
  background-color: #f91237;
  
}


#con01 .custom-btn-3.hover-opacity::before {
  top:0; bottom: 0; right: 0;
  height: 100%; 
  width: 100%;
  opacity: 0;
}
#con01 .custom-btn-3.hover-opacity:hover::before {
  opacity: 1;
  
}

/*---------------------------레퍼런스---------------------------*/


#con02 .refer-list{display: none;}
#con02 .mob-refer-list{display:block;
width: 100%;
margin: 0 auto;}
#con02 .outer > div{
  width: 100%;
}

.lines{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
}
  

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  
}
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 20vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 50%, #ffffff 100%);
  -webkit-animation: drop 5s 0s infinite;
          animation: drop 5s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0.46, 0, 0.97);
          animation-timing-function: cubic-bezier(0.6, 0.46, 0, 0.97);
}
.line:nth-child(1) {
  margin-left: -35%;
}
.line:nth-child(1)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.line:nth-child(3) {
  margin-left: 35%;
}
.line:nth-child(3)::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.guide_list {
  width: 100%;
  display: flex;
  align-items: flex-start; 
  justify-content: space-between;
  padding: 50px 0;
  border: 0px solid red;
} 
.guide_list li {
  width: 100%;
  margin: 0;
  max-width: inherit;
  border: 0px solid yellowgreen;
} 
.guide_list li a {
  display: block;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  transition: all .4s ease-in-out;
  border: 0px solid yellow;
} 
.guide_list li:nth-child(even) {
  margin-top: 0px;
} 
.guide_list li a .bg {
  position: absolute; 
  top: 0px; 
  left: 0px; 
  height: 100%; 
  width: 100%; 
  z-index: 0; 
  filter: grayscale(100%); 
  overflow: hidden; 
  border-radius: 50px 0 50px 0; 
  transition: all .4s ease-in-out; 
} 
.guide_list li a:hover {
  margin-top: -5px;
  transition: all .4s ease-in-out;
}
.guide_list li a:hover .bg { filter: grayscale(0%);} 
.guide_list li:nth-child(even) a .bg { border-radius: 0 30px 0 30px; } 
.guide_list li a > span {
  font-size: 2.4vw; 
  font-family: "SCoreDream"; 
  font-weight: 700; 
  bottom: 30px; 
  left: 30px; 
  z-index: 1; 
  display: block; 
  position: absolute; 
  color: #fff; 
} 
.guide_list li a .plus_icon {
  display: block; 
  position: absolute; 
  width:40px; 
  height: 40px; 
  bottom: 30px; 
  right: 20px; 
  z-index: 1; 
}
.guide_list li a .plus_icon:before,
.guide_list li a .plus_icon:after{
  position: absolute; 
  left: 15px;
  content:' ';
  height: 40px; 
  width: 2px; 
  background-color: #f91237;
}
.guide_list li a .plus_icon:after {transform: rotate(-90deg);}
.guide_list li.n1 a .bg { background: url(../../../images/main_refer_01.png) center top no-repeat; background-size: cover;} 
.guide_list li.n2 a .bg { background: url(../../../images/main_refer_02.png) center top no-repeat; background-size: cover;} 
.guide_list li.n3 a .bg { background: url(../../../images/main_refer_03.png) center top no-repeat; background-size: cover;} 
.guide_list li.n4 a .bg { background: url(../../../images/main_refer_04.png) center top no-repeat; background-size: cover;} 
.guide_list li.n1 a:hover .bg { background: url(../../../images/main_refer_01.png) center top no-repeat; background-size: cover;} 
.guide_list li.n2 a:hover .bg { background: url(../../../images/main_refer_02.png) center top no-repeat; background-size: cover;} 
.guide_list li.n3 a:hover .bg { background: url(../../../images/main_refer_03.png) center top no-repeat; background-size: cover;} 
.guide_list li.n4 a:hover .bg { background: url(../../../images/main_refer_04.png) center top no-repeat; background-size: cover;} 
.guide_list li a .on_box {
  background: #fff; 
  border-radius: 50px 0 50px 0; 
  position: absolute; 
  bottom: -50px; 
  left: -10px; 
  width: calc(100% - 10px); 
  height: 40%;
  padding: 30px 30px; 
  z-index: 500; 
  overflow: visible;
  opacity: 0; transition: all .4s ease-in-out; 
 -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
  box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
} 
.guide_list li a:hover .on_box { 
 opacity: 1; 
} 
.guide_list li:nth-child(even) a .on_box {
  border-radius: 0 50px 0 50px; 
} 
.guide_list li a .on_box:after {
  content: ""; position: absolute;
  width: calc(100% - 130px);
  height: 1px; 
  background: #f91237;
  bottom: 50px;
  left: 35px;
  opacity: 1; 
} 
.guide_list li a .on_box strong {
  font-size: 2.4vw;
  display: block;
  font-family: "SCoreDream";
  font-weight: 700;
  color: #222;
  margin-bottom: 10px; 
} 
.guide_list li a .on_box span {
  font-size:1.7vw;
  color: #777;
  display: block;
  margin-bottom: 30px;
  word-break: keep-all;
} 
.guide_list li a .on_box em {
  display: block;
  position: absolute;
  font-size: 1.7vw;
  font-style: normal;
  font-weight: 700;
  color: #f91237;
  bottom: 35px;
  right: 30px;
  z-index: 3;
} 



/*---------------------------솔루션---------------------------*/

#con03 {
  width: 100%;
  /*height: calc(var(--vh, 1vh) * 100);*/  
  /*height: 100%; 수정했음*/
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(180deg, #d4d1cb 0%, #ebe7e1 100%);
  background-size: cover;
  color: #fff;
  overflow: hidden;
}
#con03 .main-stitle {
  color: #444;
}

#con03 .outer{
  width: 87.5%;
}
#con03 .credit {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #000;
  border: 0px salmon solid;
}
#con03 .options {
  display: flex;
  flex-direction: column;
  align-items: row;
  overflow: hidden;
  margin: 0 auto;
  min-width: 500px;
  width: 100%;
  padding: 50px 0;
  height: 60%;
  border: 0px solid yellow;
}


#con03 .options .option {
  border: 0px solid blue;
  position: relative;
  overflow: hidden;
  min-width: 200px;
  min-height: 100px;
  margin: 10px;
  background-position: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

#con03 .options .option:nth-child(1) {
  background: url(../../../images/main_sol_01.png) no-repeat center ;
  background-size: cover;
}
#con03 .options .option:nth-child(2) {
  background: url(../../../images/main_sol_02.png) no-repeat center;
  background-size: cover;
}
#con03 .options .option:nth-child(3) {
  background: url(../../../images/main_sol_03.png) no-repeat center;
  background-size: cover ;
}
#con03 .options .option:nth-child(4) {
  background: url(../../../images/main_sol_04.png) no-repeat center;
  background-size: cover;
}

#con03 .options .option a .red-t {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.4vw;
  font-weight: 700;
}

#con03 .options .option .label .info .main {
  font-size: 2.4vw;
  font-weight: 700;
  border: 0px solid yellow;
}





/*---------------------------문의하기&푸터---------------------------*/

#footer{
  padding: 3em 0;
}
#footer .f_outer {
  text-align: center;
}

#footer .foot_left {
  width: 100%;
  text-align: center;
  line-height: nomal;
  border: 0px solid yellow;
  padding-bottom: 1em;
}
#footer .foot_left address {
  font-size: 1em;
}

#footer .foot_right{
  width: 100%;
  margin: 0 auto;
  border: 0px solid tomato ;
}


#footer .foot_right span{
  font-weight: 700;
  text-align: center;
  line-height: nomal;
  font-size: 1.2em;
}


}



/*--------------미디어쿼리 768px--------------*/


@media (max-width:768px) {
  #wrap > .swiper-pagination.is-active{
    width: 100%;
    padding-top: 20%;
    
  }
  ul.swiper-pagination li
  {width: 100%; height: 4rem; background: transparent;}



 .outer {
   border: 0px solid yellow;
    width: 90%;
  }
  
  .main-stitle {
    font-size: 5.2vw;
  }
/*--------------------------광고상품----------------------------*/

#con01 .bg_circle {
  width: 400px;
  height: 400px;
}

#con01 .outer .inner .mob-product div ul li {
  text-align: left;
  height: 35vh;
  padding: 30px;
  margin: 0%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}


#con01 .mob-product div ul li h3 {
  width: 45%;
font-size: 2.3vw;
}
#con01 .mob-product div ul.meta li h3 {
  width: 60%;
}

#con01 .mob-product div ul li .custom-btn-3 {
  width: 50%;
  bottom: 40px;
  height: 35px;
}

#con01 .custom-btn-3 a {
  font-size: 2vw;
}

/*---------------------------레퍼런스---------------------------*/
.guide_list li a {
  height: 40vh;
}
.guide_list li a > span {
  font-size: 2.5vw; 
  font-family: "SCoreDream"; 
  font-weight: 700; 
  bottom: 30px; 
  left: 30px; 
  z-index: 1; 
  display: block; 
  position: absolute; 
  color: #fff; 
} 


.guide_list li a .on_box strong {
  font-size: 2.7vw;
  display: block;
  font-family: "SCoreDream";
  font-weight: 700;
  color: #222;
  margin-bottom: 10px; 
} 
.guide_list li a .on_box span {
  font-size:2vw;
  color: #777;
  display: block;
  margin-bottom: 30px;
  word-break: keep-all;
} 
.guide_list li a .on_box em {
  display: block;
  position: absolute;
  font-size: 2vw;
  font-style: normal;
  font-weight: 700;
  color: #f91237;
  bottom: 35px;
  right: 30px;
  z-index: 3;
} 
  /*---------------------------솔루션---------------------------*/


  #con03 .options {
    display: flex;
    flex-direction: column;
    align-items: row;
    overflow: hidden;
    margin: 0 auto;
    min-width: 500px;
    width: 100%;
    padding: 50px 0;
    height: 65%;
    border: 0px solid yellow;
  }
  

  #con03 .options .option {
    min-height: 60px;
  }

  #con03 .options .option a .red-t {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.7vw;
    font-weight: 700;
  }
  
  #con03 .options .option .label .info .main {
    font-size: 2.7vw;
    font-weight: 700;
    border: 0px solid yellow;
  }
  

}




@media (max-width:480px) {

  .main-stitle {
    font-size: 8vw;
  }
  header {
    width: 90%;
  }

  div.row {
    display: block;
    position: fixed;
    top: 30px;
    right: 40px;
  }

  .hamburger .menu-line{
    width: 50px;
    height: 5px;
    margin: 7px auto;
  }


  #hamburger-1.mob-active .menu-line:nth-child(2){
    opacity: 0;
  }
  
  #hamburger-1.mob-active .menu-line:nth-child(1){
    -webkit-transform: translateY(12px) rotate(45deg);
    -ms-transform: translateY(12px) rotate(45deg);
    -o-transform: translateY(12px) rotate(45deg);
    transform: translateY(12px) rotate(45deg);
  }
  
  #hamburger-1.mob-active .menu-line:nth-child(3){
    -webkit-transform: translateY(-12px) rotate(-45deg);
    -ms-transform: translateY(-12px) rotate(-45deg);
    -o-transform: translateY(-12px) rotate(-45deg);
    transform: translateY(-12px) rotate(-45deg);
  }

  header h1 {
    padding-top: 35px;
  }
  header h1 img{
    width: 12vw;
  }
  header.is-scroll {
    position:absolute;
    top: 0;
    right: 0;
    border: 0px tomato solid;
    transform: translateY(0%);
    z-index: 1001;
    cursor: pointer;
    color: #fff;
    transition: none; 
  
  }
  header.is-scroll ul {
    display: block;
    flex-direction: unset;
  }
  header.is-scroll ul li{
    width: 100%;
  }

  ul.swiper-pagination li{width: 100%; height: 3rem; background: transparent;}
  ul.swiper-pagination li a span{font-size: 5vw;}

  .r_squre{
    width: 90%;
    height: 25%;
    border-radius: 0 150px 0 0 ;
  }

  .ring{
    top: -70px;
    left: -200px;
  }

  .ring img{
    width: 100%;
  }
  #main-visual .inner{
    width:87.5%;
    margin: 0 auto;
  }

  #main-visual .main-text {
    padding: 45% 0;
  
  }
  #main-visual .main-text span{
    font-size: 6vw;
    padding: 10px 0;

  }
  #main-visual .main-text h2{
    font-size: 10vw;
  }
  #main-visual .main-text h2:last-child{
    font-size: 10vw;
  }
  #main-visual .r_squre .redbox_text{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
  
  }
  
  #main-visual .r_squre p {
    width: 75vw;
    font-size: 4vw;
    line-height: 1.2;
    animation: fadeInLeft 2s;
    border: 0px solid green;
  }
  
  #main-visual .r_squre h5 {
    width: 75vw;
    font-weight: 700;
    font-size: 6vw;
    animation: fadeInLeft 2s;
    border: 0px solid skyblue;
  }


/*---------------------------광고상품---------------------------*/

#con01 .bg_circle {
  width: 350px;
  height: 350px;
}
#con01 .outer .inner {
  width: 90%;
 }

 #con01 .outer .inner .mob-product{
  padding: 30px 0;

 }
#con01 .outer .inner .mob-product div ul li {
  text-align: left;
  height: 40vh;
  padding: 30px;
  margin: 0%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#con01 .mob-product div ul li .red-dot{
  width: 20px;
  height: 17px;
  background-color: #f91237;
  border-radius: 20px;
  margin: 1% 0% 0% 0%;
  }

  #con01 .mob-product div ul li h3 {
    width: 35%;
    font-family: "SCoreDream";
    margin-left: 3%;
    font-weight: 700;
    font-size: 3.5vw;
    color: #f91237;
    border: 0px solid blue;
  }
  
  #con01 .mob-product div ul.meta li h3 {
     width: 46%;
  }
  #con01 .mob-product div ul.viral li h3 {
    width: 27%;
  }
  #con01 .mob-product .red-line{
    width: 74%;
    height: 0;
    border-bottom: 1px solid #f91237;
    margin: 4% 0% 0% 5%;
    }
    #con01 .mob-product div ul.meta li .red-line{
      width: 53%;
    }
    #con01 .mob-product div ul.viral li .red-line{
      width: 83%;
    }



    #con01 .mob-product div ul li .pro_text {
      display: block;
      width: 100%;
      font-weight: 700;
      font-size: 5vw;
      color: #222;
      line-height: 2.5;
      text-align: left;
      border: #ff654a 0px solid;
    }


    #con01 .mob-product div ul li .pro_detail {
      font-size: 3vw;
      color: #777;
      word-break: keep-all;
    }

    #con01 .outer .inner .mob-product div ul li .gra-ound{
      width: 130px;
      height: 130px;
      border-radius: 130px;
      background: radial-gradient(transparent);
      box-shadow: none;
    }
    
    #con01 .outer .inner .mob-product div ul li:hover .gra-ound{
      position: absolute;
      right: -7%;
      bottom: -7%;
      width: 130px;
      height: 130px;
      border-radius: 130px;
      background: radial-gradient(transparent, #444);
      animation: fadeInRight 1s;
      box-shadow: none;
    }
#con01 .mob-product div ul li .custom-btn-3 {
  width: 50%;
  bottom: 40px;
  height: 40px;
}

#con01 .custom-btn-3 a {
  font-size: 3.5vw;
}


/*---------------------------레퍼런스---------------------------*/

.guide_list {
  width: 100%;
  display: flex;
  align-items: flex-start; 
  justify-content: space-between;
  padding: 30px 0 70px 0;
  border: 0px solid red;
} 
.guide_list li a {
  height: 50vh;
}
.guide_list li a > span {
  font-size: 5vw; 
  font-family: "SCoreDream"; 
  font-weight: 700; 
  bottom: 30px; 
  left: 30px; 
  z-index: 1; 
  display: block; 
  position: absolute; 
  color: #fff; 
} 
.guide_list li a .on_box {
  bottom: -40px; 
  left: -10px; 
  height: 50%;
}

.guide_list li a .on_box strong {
  font-size: 5vw;
  display: block;
  font-family: "SCoreDream";
  font-weight: 700;
  color: #222;
  margin-bottom: 10px; 
} 
.guide_list li a .on_box span {
  font-size:3.5vw;
  color: #777;
  display: block;
  margin-bottom: 30px;
  word-break: keep-all;
} 
.guide_list li a .on_box em {
  display: block;
  position: absolute;
  font-size: 3.5vw;
  font-style: normal;
  font-weight: 700;
  color: #f91237;
  bottom: 35px;
  right: 30px;
  z-index: 3;
} 




/*---------------------------솔루션---------------------------*/
#con03 .options {
  display: flex;
  flex-direction: column;
  align-items: row;
  overflow: hidden;
  margin: 0 auto;
  min-width: 300px;
  width: 100%;
  padding: 30px 0;
  height: 60%;
  border: 0px solid yellow;
}


#con03 .options .option {
  min-height: 50px;
}

#con03 .options .option a .red-t {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 5vw;
  font-weight: 700;
}

#con03 .options .option .label .info .main {
  font-size: 5vw;
  font-weight: 700;
  border: 0px solid yellow;
}

/*------------------------문의하기 푸터---------------------------*/


#con04 .outer span.cstext {
  font-size: 3.5vw;
  word-break: keep-all;

}
button {
  margin: 0 auto; 
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: 5vw;
  font-family: "SCoreDream";
  font-weight: 700;
}
button.learn-more {
  width: 17rem;
  height: 3.5rem;
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 2rem;
}
button.learn-more .button-text {
font-size: 5vw;
}

button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3.5rem;
  height: 3.5rem;
  background: #f91237;
  border-radius: 2rem;
}

#footer {
  padding: 7% 3%;

}
#footer .f_outer {
  width: 100%;
  border: 0px solid red;
}

#footer .foot_left {
  width: 100%;
  border: 0px solid green;
}
#footer .foot_left address {
  width: 100%;
  font-family: "SCoreDream";
  text-decoration: none;
  font-style: normal;
  font-size: 3vw;
}
#footer .foot_right .cs_mail{
  display: none;
}
#footer .foot_right span{
  font-weight: 700;
  text-align: center;
  line-height: nomal;
  font-size: 5vw;
}


}

@media (max-width:320px) {
  





/*---------------------------레퍼런스---------------------------*/


}