@font-face {
 font-family: 'Pretendard-Regular';
 font-weight: 300;
 src: local('☺'),
      url(/fonts/pretendard/Pretendard-Light.woff2) format('woff2'),
      url(/fonts/pretendard/Pretendard-Light.woff) format('woff'),
      url(/fonts/pretendard/Pretendard-Light.ttf) format('truetype');
}
@font-face {
 font-family: 'Pretendard-Regular';
 font-weight: 400;
 src: local('☺'),
      url(/fonts/pretendard/Pretendard-Regular.woff2) format('woff2'),
      url(/fonts/pretendard/Pretendard-Regular.woff) format('woff'),
      url(/fonts/pretendard/Pretendard-Regular.ttf) format('truetype');
}
@font-face {
 font-family: 'Pretendard-Regular';
 font-weight: 500;
 src: local('☺'),
      url(/fonts/pretendard/Pretendard-Medium.woff2) format('woff2'),
      url(/fonts/pretendard/Pretendard-Regular.woff) format('woff'),
      url(/fonts/pretendard/Pretendard-Regular.ttf) format('truetype');
}
@font-face {
 font-family: 'Pretendard-Regular';
 font-weight: 700;
 src: local('☺'),
      url(/fonts/pretendard/Pretendard-Bold.woff2) format('woff2'),
      url(/fonts/pretendard/Pretendard-Bold.woff) format('woff'),
      url(/fonts/pretendard/Pretendard-Bold.ttf) format('truetype');
}
@font-face {
 font-family: 'Pretendard-Regular';
 font-weight: 800;
 src: local('☺'),
      url(/fonts/pretendard/Pretendard-ExtraBold.woff2) format('woff2'),
      url(/fonts/pretendard/Pretendard-ExtraBold.woff) format('woff'),
      url(/fonts/pretendard/Pretendard-ExtraBold.ttf) format('truetype');
}
@font-face {
 font-family: 'Pretendard-Regular';
 font-weight: 900;
 src: local('☺'),
      url(/fonts/pretendard/Pretendard-Black.woff2) format('woff2'),
      url(/fonts/pretendard/Pretendard-Black.woff) format('woff'),
      url(/fonts/pretendard/Pretendard-Black.ttf) format('truetype');
}
@font-face {
 font-family: 'HSSanTokki20-Regular';
 font-weight: normal;
 src: local('☺'),
      url(/fonts/hssantokki/HSSanTokki-2.0.woff2) format('woff2'),
      url(/fonts/hssantokki/HSSanTokki-2.0.woff) format('woff'),
      url(/fonts/hssantokki/HSSanTokki-2.0.ttf) format('truetype');
}


/* =======================================================
*
* 	Template Style
*
* ======================================================= */
* {
  font-family: "Pretendard-Regular", Arial, sans-serif;
  /* margin: 0; */
  /* padding: 0; */
  box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    word-break: keep-all;
    /* font: inherit; */
    /* vertical-align: middle; */
}
body {
  font-weight: 500;
  font-size: 16px;
  /* line-height: 1.7; */
  color: #111;
  background: #fff;
}
#page .container{
  padding: 0;
  max-width: 1490px;
}
@media screen and (max-width: 1490px){
  #page .container{
    max-width: 1280px;
  }
}
@media screen and (max-width: 1280px){
  #page .container{
    max-width: 1024px;
  }
}
@media screen and (max-width: 1024px){
  #page .container{
    max-width: 990px;
  }
}
@media screen and (max-width : 768px){
  #page .container{
    padding: 0 10px;
  }
}

#page{
  overflow-x: hidden;
}
p{
  font-size: 18px;
  word-break: keep-all;
}
@media screen and (max-width : 768px){
  p{
    font-size: 16px;
  }
}
img{
  max-width: 100%;
}
a{
  color: #000;
  text-decoration: none;
}
ul{
  list-style-type: none;
}
table{
  border-spacing: unset;
}
hr{
  margin: 0;
}
@media screen and (max-width: 768px){
  #page section .container{
    padding-left: 10px;
    padding-right: 10px;
  }
}
.row{
  width: 100%;
  margin-left: unset;
  margin-right: unset;
}
.row > *{
  margin-left: unset;
  margin-right: unset;
  padding-left: unset;
  padding-right: unset;
}
.ft-red{
  color: #ff1313 !important;
}
#page .is-pc{
  display:none !important;
}
#page .is-m{
  display:block !important;
}
@media (min-width: 768px){
	#page .is-pc{
    display:block !important;
	}
	#page .is-m{
    display:none !important;
	}
}
.ft-black{
  color: #111 !important;
}
.ft-orange{
  color: #ec5716 !important;
}
.ft-orange2{
  color: #ea5514 !important;
}
.ft-white{
  color: #fff !important;
}
.ft-bold{
  font-weight: 700 !important;
}
.ft-exbold{
  font-weight: 900 !important;
}
/* ********************* header *********************** */
header{
  /* margin-bottom: 90px; */
}
header .container-fluid{
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 1px;
  display: flex;
  align-items: stretch !important;
  justify-content: space-between;
}
header .navbar-expand-lg .navbar-nav{
  /* gap: 20px; */
}
header .navbar-expand-lg .navbar-toggler{
  border: none;
}
header .navbar-expand-lg .navbar-toggler:focus{
  border: none;
  box-shadow: none;
}
header .custom-navbar {
  border-bottom: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.5);
  /* background-color: transparent; */
  transition: 0.3s;
  padding: 0;
  /* bg-body-tertiary를 제거해야 작동 */
}
header .custom-navbar.scrolled{
  background-color: #fff;
  border-bottom: 1px solid #eee;;
}
header .custom-navbar:hover{
  background-color: rgba(255, 255, 255, 1);
}
header .navbar-expand-lg .offcanvas{
  flex-grow: unset;
  display: flex;
  flex-direction: row;
  justify-items: flex-end;
  align-items: stretch;
}
header .navbar-nav{
  /* display: flex; */
  align-items: stretch;
}
header .navbar-nav > div{
  position: relative;
  /* padding: 20px 33px; */
  display: flex;
  align-items: center;
}
header .navbar-nav > div.service{
  padding: 20px 54px;
}
header .navbar-nav > div:first-child{
  padding: 20px 0;
  padding-right: 12px;
}
header .navbar-nav > div:last-child{
  padding: 20px 0;
  /* padding-right: 0; */
  padding-left: 12px;
}
header .navbar-brand{
  display: flex;
  align-items: center;
}
header .navbar-nav .nav-link{
  font-size: 22px;
  font-weight: 500;
  color: #111 !important;
}
.navbar-expand-lg .navbar-nav .nav-link{
  padding-right: 0;
  padding-left: 0;
}
header .navbar-nav > div .dropdown{
  position: absolute;
  left: 0;
  top: 89px;
  background-color: #fff;
  width: 100%;
  text-align: center;
  padding: 10px 19px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  /* padding-bottom: 5px; */
  /* width: 195px; */
  display: none;
}
header .navbar-nav > div .dropdown li{
}
header .navbar-nav > div .dropdown li a{
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s;
}
header .navbar-nav > div .dropdown li a:hover,
header .navbar-nav > div .dropdown li a.active{
  background-color: #fde9e0;
  border-radius: 10px;
}
@media screen and (max-width : 768px){
  header{
    /* margin-bottom: 64px; */
  }
  header .navbar-brand{
    padding: 0;
    width: 34%;
  }
  header .navbar-nav > div{
    flex-direction: column;
  }
  header .navbar-expand-lg .offcanvas{
    flex-direction: column;
  }
  header .container-fluid{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  header .navbar-nav > div.service{
    padding: 0;
  }
  header .navbar-nav > div:first-child{
    padding: 0;
    padding-right: 0px;
  }
  header .navbar-nav > div:last-child{
    padding: 0;
    padding-left: 0;
  }
  header .navbar-nav > div .dropdown{
    position: unset;
    padding: 0;
    padding-top: 0px;
    border-left: none;
    border-right: none;
  }
  header .navbar-nav > div .dropdown li{
    margin: 10px 0;
  }
  header .navbar-nav > div .dropdown li a{
    padding: 5px 20px;
    /* width: fit-content; */
  }
  header .navbar-nav .nav-link{
    font-size: 18px;
  }
  header .navbar-nav > div .dropdown li a{
    font-size: 16px;
  }
}


/* ********************* footer *********************** */
footer{
  background: #000;
  border-top: 1px solid #272727;
}
footer .container{
  /* max-width: 1490px; */
  /* margin-left: 208px; */
}
footer .row{
  align-items: center;
}
footer .left p{
  color: #ddd;
  font-size: 16px;
  margin-top: 5px;
  margin-left: 60px;
}
footer .right{
  margin-left: -3rem;
}
footer ul{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  word-break: keep-all;
  /* padding: 0; */
  padding-top: 52px;
  padding-bottom: 52px;
  line-height: 1.5;
  margin-bottom: 0;
  padding-left: 2.5rem;
}
footer ul li{
  color: #7e685d;
  width: 52%;
  padding-bottom: 10px;
  font-weight: 600;
}
footer ul li:nth-child(2n){
  width: 48%;
}
footer ul li:last-child{
  padding-bottom: 0;
}
footer ul li span{
  color: #fff;
  margin-left: 10px;
  font-weight: 400;
}
footer .row .bottom{
  padding-left: 2.5rem;
  color: #fff;
  padding-top: 45px;
  padding-bottom: 45px;
}
footer .row .bottom p{
  padding-bottom: 12px;
}
footer .row .bottom .copy{
  color: #6d6d6d;
  padding-bottom: 0;
}
footer hr{
  color: #aaa;
}
@media screen and (max-width : 768px){
  footer{
    font-size: 12px;
    padding: 20px 0;
  }
  footer p{
    font-size: 12px;
  }
  footer .left p{
    font-size: 12px;
    margin-top: 5px;
    margin-left: 44px;
  }
  footer .right{
    margin-left: 0;
  }
  footer ul{
    flex-direction: column;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 5px;
  }
  footer ul li{
    width: 100%;
  }
  footer ul li:nth-child(2n){
    width: 100%;
  }
  footer .row .bottom{
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  footer img{
    width: 150px;
  }
  footer .row .bottom p{
    padding-bottom: 6px;
  }
  footer hr{
    margin: 4px 0;
  }
}




/* ********************* 공통 *********************** */
.title h2{
  font-size: 55px;
  font-weight: 700;
  text-align: center;
}
.title h2 span{
  /* font-size: 75px; */
  /* vertical-align: baseline; */
}
#page.main .title h2 span{
  font-size: 75px;
}
#page .is-bg{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width : 1280px){
  .title h2{
    font-size: 33px;
  }
  #page.main .title h2 span{
    font-size: 45px;
  }
}
@media screen and (max-width : 768px){
  .title h2{
    font-size: 24px;
  }
  #page.main .title h2 span{
    font-size: 32px;
  }
}
.s-title{
  text-align: center;
}
.s-title h1{
  font-size: 70px;
  font-weight: 700;
  background: linear-gradient(to right, #b3162c, #ea5514, #b3162c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 40px;
}
.s-title p{
  font-size: 25px;
}
@media screen and (max-width : 768px){
  .s-title h1{
    font-size: 30px;
    margin-bottom: 15px;
  }
  .s-title p{
    font-size: 12px;
  }
}
.gradient-box{
  font-size: 28px;
  width: fit-content;
  padding: 12px 55px;
  background: linear-gradient(to right, #b3162c, #ea5514, #b3162c);
  border-radius: 37.5px;
  color: #fff;
}
@media screen and (max-width : 768px){
  .gradient-box{
    font-size: 14px;
    padding: 6px 25px;
    border-radius: 30px;
  }
}



/* ********************* privacy *********************** */
#page.privacy section{
  padding: 150px 0 50px 0;
}
#page.privacy section .title{
  border-bottom: 3px solid #ec5716;
  padding-bottom: 30px;
}
#page.privacy section .title h1{
  font-size: 28px;
  font-weight: 900;
  padding-bottom: 20px;
}
#page.privacy section .content > div{
  margin: 30px 0;
}
#page.privacy section .content > div h3{
  font-size: 18px;
  font-weight: 700;
}
#page.privacy section .content > div p{
  font-size: 14px;
  margin-bottom: 10px;
}
#page.privacy section .content > div hr{
  margin: 4px 0;
}
@media screen and (max-width : 768px){
  #page.privacy section{
    padding: 100px 0 50px 0;
  }
  #page.privacy section .title h1{
    font-size: 24px;
  }
}



/* ********************* top-video *********************** */
#page.main section.top-video{
  /* position: relative;
  width: 100vw; */
  /* height: 100vh; */
  overflow: hidden;
}
#page.main section.top-video video{
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
@media screen and (max-width : 768px){
  /* #page.main section.top-video{
    position: unset;
    width: unset;
    height: unset;
    overflow: hidden;
  }
  #page.main section.top-video video{
    position: unset;
    top: unset;
    left: unset;
    width: 100%;
    height: 100%;
    object-fit: cover;
  } */
}
/* ********************* top-banner *********************** */
#page section.top-banner{
  margin: 0;
  /* padding-top: 89px; */
}
@media screen and (max-width : 768px){
  #page section.top-banner{
    /* padding-top: 54px; */
  }
}
#page.main section.top-banner .top-wrap{
  display: flex;
  height: 922px;
}
#page.main section.top-banner .top-wrap > div{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#page.main section.top-banner .top-wrap > div::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* 시작은 투명 */
  z-index: 1;
}
#page.main section.top-banner .top-wrap .left{
  width: 31.75%;
  background-image: url('/images/main/top1.jpg');
  /* animation: darkBg 1s ease forwards; */
}
#page.main section.top-banner .top-wrap.active .left::before {
  animation: darkBg 0.5s ease forwards;
}
#page.main section.top-banner .top-wrap .middle{
  width: 36.5%;
  background-image: url('/images/main/top2.jpg');
  justify-content: flex-start;
}
#page.main section.top-banner .top-wrap .right{
  width: 31.75%;
  background-image: url('/images/main/top3.jpg');
}
#page.main section.top-banner .top-wrap.active .right::before {
  animation: darkBg 0.5s ease forwards;
  animation-delay: 1.2s;
}
#page.main section.top-banner .top-wrap .des{
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 70px;
  opacity: 0;
}
#page.main section.top-banner .top-wrap .des h2{
  font-size: 48px;
  margin-bottom: 46px;
}
#page.main section.top-banner .top-wrap .des p{
  font-size: 25px;
  line-height: 1.7;
}
#page.main section.top-banner .top-wrap .middle .des h2{
  font-size: 80px;
}
#page.main section.top-banner .top-wrap .middle .des h2 span{
  /* vertical-align: baseline; */
}
#page.main section.top-banner .top-wrap .middle .des h2 span::before{
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-top: 10px;
  width: 14px;
  height: 20px;
  background-image: url('/images/main/top_mark.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#page.main section.top-banner .top-wrap .middle .des h2 span::after{
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-top: 10px;
  width: 14px;
  height: 20px;
  background-image: url('/images/main/top_mark2.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#page.main section.top-banner .top-wrap.active .left .des{
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 0.4s;
}
#page.main section.top-banner .top-wrap.active .middle .des{
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 0.8s;
}
#page.main section.top-banner .top-wrap.active .right .des{
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1.4s;
}
@keyframes darkBg {
  0% {
    background: rgba(11, 5, 1, 0);
  }
  100% {
    background: rgba(11, 5, 1, 0.9); /* 점점 어두워짐 */
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@media screen and (max-width : 1024px){
  #page.main section.top-banner .top-wrap .des h2{
    font-size: 38px;
    margin-bottom: 30px;
  }
  #page.main section.top-banner .top-wrap .middle .des h2{
    font-size: 50px;
  }
}
@media screen and (max-width : 768px){
  #page.main section.top-banner .top-wrap{
    flex-direction: column;
    height: 100vh;
  }
  #page.main section.top-banner .top-wrap > div{
    /* padding: 30px 0; */
  }
  #page.main section.top-banner .top-wrap .left{
    width: 100%;
    height: 27%;
    background-position: right;
  }
  #page.main section.top-banner .top-wrap .middle{
    width: 100%;
    height: 46%;
    padding-top: 50px;
    /* padding: 120px 0; */
  }
  #page.main section.top-banner .top-wrap .right{
    width: 100%;
    height: 27%;
    background-position: bottom;
  }
  #page.main section.top-banner .top-wrap .des{
    margin-top: 0px;
  }
  #page.main section.top-banner .top-wrap .des h2{
    font-size: 24px;
    margin-bottom: 15px;
  }
  #page.main section.top-banner .top-wrap .des p{
    font-size: 20px;
  }
  #page.main section.top-banner .top-wrap .middle .des h2{
    font-size: 40px;
  }
  #page.main section.top-banner .top-wrap .middle .des h2 span::before{
    width: 7px;
    height: 10px;
    margin-top: 5px;
  }
  #page.main section.top-banner .top-wrap .middle .des h2 span::after{
    width: 7px;
    height: 10px;
    margin-top: 5px;
  }
}
/* ********************* intro *********************** */
#page.main section.intro{
  background-image: url('/images/main/intro_bg.jpg');
  padding-top: 330px;
  padding-bottom: 250px;
}
#page.main section.intro .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
}
#page.main section.intro .des{
  position: relative;
}
#page.main section.intro .title{
  font-size: 83px;
  text-align: center;
  margin-bottom: -40px;
  width: max-content;
}
#page.main section.intro .title{
  text-shadow: 0px 11px 24px rgba(0, 0, 0, 1);
}
#page.main section.intro .title span{
  /* vertical-align: baseline; */
}
#page.main section.intro .title .pulse{
  display: inline-block;
}
#page.main section.intro .title h1 .change{
  font-family: 'HSSanTokki20-Regular', sans-serif;
  font-size: 130px;
  font-weight: 500;
  letter-spacing: 10px;
}
#page.main section.intro .title h1 .change::before{
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-top: 5px;
  width: 33px;
  height: 42px;
  background-image: url('/images/main/intro_mark3.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#page.main section.intro .title h1 .change::after{
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-top: 5px;
  margin-left: -10px;
  width: 33px;
  height: 42px;
  background-image: url('/images/main/intro_mark4.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#page.main section.intro .title p{
  font-size: 32px;
  color: #a8a8a8;
  margin-top: 40px;
}
#page.main #marketingText{
  opacity: 0;
  visibility: hidden;
}
#page.main section.intro .des .icon{
  position: absolute;
  bottom: 60%;
  left: 50%;
  transform: translateX(-50%);
}
#page.main section.intro .des .icon img{
  display: inline-block;
  transform-origin: bottom center;
  animation: swing 1.5s linear infinite;
}
@keyframes swing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
@media screen and (max-width : 1490px){
  #page.main section.intro .title{
    font-size: 50px;
  }
  #page.main section.intro .title h1 span{
    font-size: 90px;
  }
}
@media screen and (max-width : 768px){
  #page.main section.intro{
    padding-top: 150px;
    padding-bottom: 60px;
  }
  #page.main section.intro .title{
    font-size: 30px;
    margin-bottom: -10px;
    /* width: unset; */
  }
  #page.main section.intro .title h1 span{
    font-size: 50px !important;
    letter-spacing: 10px;
  }
  #page.main section.intro .title h1 span::before{
    width: 22px;
    height: 28px;
    margin-top: 0;
  }
  #page.main section.intro .title h1 span::after{
    width: 22px;
    height: 28px;
    margin-top: 0;
    margin-left: -10px;
  }
  #page.main section.intro .title p{
    font-size: 18px;
    margin-top: 10px;
  }
  #page.main section.intro .des .icon{
    bottom: 80%;
  }
}
/* ********************* differ *********************** */
#page.main section.differ{
  background-image: url('/images/main/differ_bg.jpg');
  padding-top: 230px;
}
#page.main section.differ .row,
#page.main section.differ2 .row{
  display: flex;
}
#page.main section.differ .row > div,
#page.main section.differ2 .row > div{
  flex: 1;
}
#page.main section.differ .person{
  text-align: center;
  position: relative;
  z-index: 2;
}
#page.main section.differ .title .check,
#page.main section.differ2 .title .check{
  border: 3px solid #ec5716;
  width: fit-content;
  border-radius: 45px;
  font-size: 26px;
  padding: 10px 35px;
}
#page.main section.differ .title .check::before,
#page.main section.differ2 .title .check::before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 23px;
  height: 25px;
  background-image: url('/images/main/check.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#page.main section.differ .title h2,
#page.main section.differ2 .title h2{
  text-align: left;
  line-height: 1.3;
  margin-top: 30px;
  margin-bottom: 40px;
}
#page.main section.differ .title p,
#page.main section.differ2 .title p{
  line-height: 1.6;
  font-size: 23px;
  color: #333;
}
#page.main section.differ .needs,
#page.main section.differ2 .needs{
  position: relative;
}
#page.main section.differ .needs .qa,
#page.main section.differ2 .needs .qa{
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
#page.main section.differ .needs .qa.active,
#page.main section.differ2 .needs .qa.active{
  opacity: 1;
  transform: translateY(0px);
}
#page.main section.differ .needs .n1{
  top: -12%;
  left: -7%;
}
#page.main section.differ .needs .n2{
  top: -31%;
  right: -5%;
}
#page.main section.differ .needs .n3{
  top: 7%;
  right: -23%;
}
@media screen and (max-width : 1490px){
  #page.main section.differ .needs .n1{
    top: -20%;
    left: -15%;
  }
  #page.main section.differ .needs .n2{
    top: -31%;
    right: -5%;
  }
  #page.main section.differ .needs .n3{
    top: -1%;
    right: -30%;
  }
}
@media screen and (max-width : 1280px){
  #page.main section.differ .row,
  #page.main section.differ2 .row{
    gap: 20px;
  }
  #page.main section.differ .title p,
  #page.main section.differ2 .title p{
    font-size: 20px;
  }
  #page.main section.differ .needs .n1{
    top: -20%;
    left: -42%;
  }
  #page.main section.differ .needs .n2{
    top: -31%;
    right: -5%;
  }
  #page.main section.differ .needs .n3{
    top: -1%;
    right: -46%;
  }
  #page.main section.differ .person{
    width: 80%;
    margin: auto;
  }
}
@media screen and (max-width : 1024px){
  #page.main section.differ .row, #page.main section.differ2 .row{
    gap: 0;
  }
  #page.main section.differ .needs .qa,
  #page.main section.differ2 .needs .qa{
    width: 90%;
  }
  #page.main section.differ .needs .n1{
    top: -20%;
    left: -35%;
  }
  #page.main section.differ .needs .n2{
    top: -38%;
    right: -5%;
  }
  #page.main section.differ .needs .n3{
    top: -1%;
    right: -31%;
  }
}
@media screen and (max-width : 768px){
  #page.main section.differ{
    padding-top: 60px;
  }
  #page.main section.differ .row{
    flex-direction: column;
    gap: 20px;
  }
  #page.main section.differ .title h2,
  #page.main section.differ2 .title h2{
    margin-top: 20px;
    margin-bottom: 10px;
  }
  #page.main section.differ .title p,
  #page.main section.differ2 .title p{
    font-size: 16px;
  }
  #page.main section.differ .person{
    width: 50%;
  }
  #page.main section.differ .title .check,
  #page.main section.differ2 .title .check{
    border: 2px solid #ec5716;
    font-size: 16px;
    padding: 4px 14px;
  }
  #page.main section.differ .title .check::before,
  #page.main section.differ2 .title .check::before{
    width: 13px;
    height: 15px;
  }
  #page.main section.differ .needs{
    margin-top: 60px;
  }
  #page.main section.differ .needs .qa{
    width: 70%;
  }
  #page.main section.differ .needs .n1{
    top: -12%;
    left: -10%;
  }
  #page.main section.differ .needs .n3{
    top: 7%;
    right: -14%;
  }
}
/* ********************* differ2 *********************** */
#page.main section.differ2{
  background-image: url('/images/main/differ2_bg.jpg');
  padding-top: 230px;
}
#page.main section.differ2 .person{
  margin-left: -150px;
  position: relative;
  z-index: 2;
}
#page.main section.differ2 .needs .p1{
  top: -14%;
  left: -6%;
}
#page.main section.differ2 .needs .p2{
  top: -4%;
  right: 14%;
}
@media screen and (max-width : 1490px){
  #page.main section.differ2 .needs .p2{
    top: -7%;
    right: 0%;
  }
}
@media screen and (max-width : 1280px){
  #page.main section.differ2 .needs .p1{
    top: -18%;
    left: -18%;
  }
  #page.main section.differ2 .needs .p2{
    top: -31%;
    right: -5%;
  }
  #page.main section.differ2 .person{
    margin-left: -80px;
  }
}
@media screen and (max-width : 768px){
  #page.main section.differ2{
    padding-top: 60px;
  }
  #page.main section.differ2 .row{
    flex-direction: column-reverse;
  }
  #page.main section.differ2 .person{
    width: 80%;
    margin: auto;
    margin-left: 14px;
  }
  #page.main section.differ2 .needs{
    margin-top: 100px;
  }
  #page.main section.differ2 .needs .qa{
    width: 50%;
  }
  #page.main section.differ2 .needs .p1{
    top: -26%;
    left: 2%;
  }
  #page.main section.differ2 .needs .p2{
    top: -15%;
    right: -4%;
  }
}
/* ********************* up *********************** */
#page.main section.up{
  background-image: url('/images/main/up_bg.jpg');
  padding-top: 140px;
  padding-bottom: 120px;
}
#page.main section.up .title{
  margin-bottom: 68px;
}
#page.main section.up .title h2{
  text-align: left;
}
#page.main section.up .contents{
  padding: 0 180px;
}
#page.main section.up .contents .star{
  display: flex;
  justify-content: space-between;
}
#page.main section.up .contents .graph{
  display: flex;
  justify-content: center;
  padding: 0 34px;
}
#page.main section.up .contents .star > div{
  position: relative;
}
#page.main section.up .contents .des{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  text-align: center;
}
#page.main section.up .contents .des hr{
  color: #fff;
  width: 230px;
  margin: 20px 0;
}
#page.main section.up .contents .des p{
  font-size: 32px;
  line-height: 1.25;
}
#page.main section.up .contents > div{
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
#page.main section.up .contents > div.active{
  opacity: 1;
  transform: translateY(0px);
}
@media screen and (max-width : 1280px){
  #page.main section.up .contents .des hr{
    width: 150px;
    margin: 10px 0;
  }
  #page.main section.up .contents .des p{
    font-size: 24px;
  }
}
@media screen and (max-width : 768px){
  #page.main section.up{
    padding: 60px 0;
  }
  #page.main section.up .title{
    margin-bottom: 30px;
  }
  #page.main section.up .contents{
    padding: 0;
  }
  #page.main section.up .contents .des p{
    font-size: 12px;
  }
  #page.main section.up .contents .des > div{
    width: 20%;
    margin: auto;
  }
  #page.main section.up .contents .star > div:nth-child(2) .des > div{
    width: 40%;
  }
  #page.main section.up .contents .star > div:nth-child(3) .des > div{
    width: 60%;
  }
  #page.main section.up .contents .des hr{
    margin: 4px 0;
    width: 80px;
  }
  #page.main section.up .contents .graph{
    padding: 0 10px;
  }
}
/* ********************* review *********************** */
#page.main section.review{
  background-color: #ec5716;
  padding: 105px 0;
}
#page.main section.review .title h2{
  font-size: 35px;
  margin-bottom: 66px;
  text-align: left;
}
#page.main section.review .swiper-slide{
  background-color: #fff;
  border-radius: 30px;
  padding: 30px 30px 20px 40px;
}
#page.main section.review .des h4{
  font-size: 26px;
  margin-top: 10px;
  margin-bottom: 15px;
}
#page.main section.review .des .name{
  color: #666;
  margin-top: 15px;
}
#page.main section.review .swiper-slide .balloon{
  text-align: right;
}
#page.main section.review .container{
  position: relative;
}
#page.main section.review .swiper-box{
  position: relative;
}
.swiper-button-prev:after,
.swiper-button-next:after{
  display: none;
}
#page.main section .swiper-button-next,
#page.main section .swiper-button-prev{
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}
#page.main section.review .swiper-button-prev{
  left: -50px;
}
#page.main section.review .swiper-button-next{
  right: -50px;
}
#page.main section.review .swiper-pagination-bullet{
  background: #fff;
  opacity: 0.5;
}
#page.main section.review .swiper-pagination-bullet-active {
  opacity: 1;
}
#page.main section.review .swiper-pagination{
  top: 6px;
  text-align: right;
  height: fit-content;
  /* width: unset !important; */
  /* bottom: unset !important; */
}
@media screen and (max-width : 1280px){
  #page.main section.review .des h4{
    font-size: 24px;
  }
}
@media screen and (max-width : 768px){
  #page.main section.review{
    padding: 60px 0 80px 0;
  }
  #page.main section.review .title h2{
    font-size: 24px;
    margin-bottom: 33px;
    text-align: center;
  }
  #page.main section.review .swiper-pagination{
    top: 16%;
    padding-right: 10px;
  }
  #page.main section .swiper-button-next,
  #page.main section .swiper-button-prev{
    display: none;
  }
  #page.main section.review .swiper-slide{
    padding: 20px 20px 10px 20px;
  }
  #page.main section.review .des h4{
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #page.main section.review .swiper-slide > img{
    width: 20px;
  }
  #page.main section.review .swiper-slide .balloon img{
    width: 52px;
  }
}
/* ********************* results *********************** */
#page.main section.results{
  padding-top: 174px;
  padding-bottom: 272px;
}
#page.main section.results .title{
  margin-bottom: 106px;
}
#page.main section.results .swiper-box{
  position: relative;
}
#page.main section.results .swiper{
  /* overflow: visible; */
  margin-left: -8%;
}
#page.main section.results .swiper-slide{
  /* width: 80%; */
  max-width: 530px;
}
#page.main section.results .swiper-pagination-bullet{
  background: #c1c1c1;
  opacity: 1;
}
#page.main section.results .swiper-pagination-bullet-active{
  background: #ec5716;
}
#page.main section.results .swiper-pagination{
  bottom: -88px;
}
@media screen and (max-width : 1280px){
  #page.main section.results .swiper{
    margin-left: -15%;
  }
}
@media screen and (max-width : 768px){
  #page.main section.results{
    padding-top: 50px;
    padding-bottom: 70px;
  }
  #page.main section.results .title{
    margin-bottom: 20px;
  }
  #page.main section.results .swiper{
    margin-left: 0;
  }
  #page.main section.results .swiper-pagination{
    bottom: -30px;
  }
}
/* ********************* service *********************** */
#page.main section.service{
  background-image: url('/images/main/service_bg.jpg');
  padding-top: 140px;
  padding-bottom: 120px;
}
#page.main section.service .contents{
  padding: 0 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
#page.main section.service .title{
  margin-bottom: 86px;
}
#page.main section.service .contents > div{
  text-align: center;
  /* border: 1px solid #fff; */
  /* border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30 */
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.4);
  border-radius: 30px;
  height: 264px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* transition: all 0.3s ease; */
  /* cursor: pointer; */
  position: relative;
}
#page.main section.service .contents > div:last-child{
  box-shadow: none;
  background-color: #ec5716;
}
#page.main section.service .contents > div p{
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-top: 33px;
  line-height: 1;
}
#page.main section.service .contents > div:last-child p{
  margin-top: 20px;
}
#page.main section.service .contents > div p span{
  font-size: 25px;
}
/* #page.main section.service .contents > div:hover{
  box-shadow: none;
  background-color: #ec5716;
} */
#page.main section.service .contents .back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  opacity: 0;
  padding: 0 20px;
}
#page.main section.service .contents .back p{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}
#page.main section.service .contents > div .front{
  transition: opacity 0.3s ease;
}
#page.main section.service .contents > div:hover .front{
  opacity: 0;
}
#page.main section.service .contents > div:hover .back{
  opacity: 1;
}
@media screen and (max-width : 1280px){
  #page.main section.service .contents{
    padding: 0;
  }
  #page.main section.service .contents > div p{
    font-size: 26px;
  }
}
@media screen and (max-width : 768px){
  #page.main section.service{
    padding-top: 60px;
    padding-bottom: 80px;
  }
  #page.main section.service .title{
    margin-bottom: 30px;
  }
  #page.main section.service .contents{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  #page.main section.service .contents img{
    width: 60px;
  }
  #page.main section.service .contents > div{
    height: 130px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.4);
  }
  #page.main section.service .contents > div p{
    font-size: 16px;
    margin-top: 10px;
  }
  #page.main section.service .contents > div:last-child p{
    margin-top: 10px;
  }
  #page.main section.service .contents > div p span{
    font-size: 12px;
  }
  #page.main section.service .contents .back{
    padding: 0 10px;
  }
  #page.main section.service .contents .back p{
    font-size: 12px;
  }
}
/* ********************* how *********************** */
#page.main section.how{
  background-color: #fff7f3;
  padding-top: 146px;
  padding-bottom: 160px;
}
#page.main section.how .title{
  margin-bottom: 100px;
}
#page.main section.how .contents{
  display: flex;
  align-items: center;
}
#page.main section.how .contents .process{
  width: 33%;
  display: flex;
  flex-direction: column;
  gap: 33px;
}
#page.main section.how .contents .slide{
  width: 67%;
}
#page.main section.how .number{
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background-color: #fff;
  justify-content: center;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  position: relative;
  transition: all 0.2s;
  z-index: 2;
}
#page.main section.how .step{
  display: flex;
  align-items: center;
  gap: 14px;
}
#page.main section.how .step .des p{
  font-size: 16px;
  color: #666;
}
#page.main section.how .step .des h4{
  font-size: 23px;
  line-height: 1.4;
}
#page.main section.how .process{
  position: relative;
}
#page.main section.how .step:first-child .number::after{
  content: '';
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 392px;
  background-color: #858585;
  z-index: 1;
}
#page.main section.how .step:last-child .number::after{
  display: none;
}
#page.main section.how .swiper-slide{
  text-align: center;
}
#page.main section.how .contents .slide{
  position: relative;
}
#page.main section.how .swiper-pagination{
  bottom: -38px;
}
#page.main section.how .swiper-pagination-bullet{
  background: #c1c1c1;
  opacity: 1;
}
#page.main section.how .swiper-pagination-bullet-active{
  background: #ec5716;
}
#page.main section.how .step.active .number{
  background-color: #ec5716;
  color: #fff;
}
#page.main section.how .swiper-slide img{
  position: relative;
}
#page.main section.how .swiper-slide .des{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: max-content;
}
#page.main section.how .swiper-slide .des p{
  font-size: 23px;
}
@media screen and (max-width : 1280px){
  #page.main section.how .number{
    width: 46px;
    height: 46px;
    font-size: 30px;
  }
  #page.main section.how .swiper-slide .des p{
    font-size: 18px;
  }
  #page.main section.how .step .des h4{
    font-size: 20px;
    word-break: keep-all;
  }
}
@media screen and (max-width : 768px){
  #page.main section.how{
    padding-top: 60px;
    padding-bottom: 80px;
  }
  #page.main section.how .title{
    margin-bottom: 30px;
  }
  #page.main section.how .contents{
    flex-direction: column;
  }
  #page.main section.how .contents .process{
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  #page.main section.how .step{
    flex: 1;
    align-items: center;
  }
  #page.main section.how .step .des h4{
    font-size: 16px;
  }
  #page.main section.how .number{
    width: 33px;
    height: 33px;
    font-size: 20px;
  }
  #page.main section.how .step:first-child .number::after{
    top: 32px;
    height: 240px;
  }
  #page.main section.how .step{
    gap: 8px;
  }
  #page.main section.how .step .des{
    width: calc(100% - 33px);
  }
  #page.main section.how .contents .slide{
    width: 100%;
    margin-top: 20px;
  }
  #page.main section.how .swiper-slide .des p{
    font-size: 12px;
  }
  #page.main section.how .swiper-pagination{
    bottom: -30px;
  }
}



/* ********************* contact배너 *********************** */
#page section.contact{
  background-image: url('/images/main/contact_bg.jpg');
  padding: 84px 0 100px 0 ;
}
#page section.contact .icons{
   display: grid;
   grid-template-columns: repeat(6, minmax(auto, 154px));
   justify-content: center;
   gap: 10px;
   margin-bottom: 60px;
}
#page section.contact .icons > a{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 30px;
  height: 146px;
  transition: background-color 0.2s;
}
#page section.contact .icons > a:hover{
  background-color: #fff;
}
#page section.contact .icons > a:hover p{
  color: #ea5514;
}
#page section.contact .icons > a img{
  transition: opacity 0.2s;
}
#page section.contact .icons p{
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  margin-top: 14px;
  line-height: 1;
  transition: color 0.2s;
}
#page section.contact .icons p span{
  font-size: 14px;
  font-weight: 500;
}
#page section.contact .title h2{
  font-size: 50px;
  margin-bottom: 20px;
}
#page section.contact .title p{
  text-align: center;
  font-size: 26px;
}
#page section.contact .button{
  width: fit-content;
  margin: auto;
  border-radius: 45px;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
  margin-top: 54px;
}
#page section.contact .button a{
  display: block;
  font-size: 35px;
  color: #fff;
  padding: 18px 106px;
  transition: all 0.3s;
}
#page section.contact .button:hover{
  box-shadow: none;
  background-color: #fff;
}
#page section.contact .button:hover a{
  color: #ec5716;
}
@media screen and (max-width : 1280px){
  #page section.contact .title h2{
    font-size: 38px;
  }
  #page section.contact .title p{
    font-size: 24px;
  }
}
@media screen and (max-width : 768px){
  #page section.contact{
    padding: 60px 0;
  }
  #page section.contact .icons{
     grid-template-columns: repeat(3, minmax(100px, 154px));
     gap: 10px;
     margin-bottom: 60px;
  }
  #page section.contact .icons > a{
    height: 116px;
  }
  #page section.contact .icons p{
    margin-top: 10px;
    font-size: 14px;
  }
  #page section.contact .icons p span{
    font-size: 10px;
  }
  #page section.contact .icons img{
    width: 50px;
  }
  #page section.contact .title h2{
    font-size: 24px;
    margin-bottom: 15px;
  }
  #page section.contact .title p{
    font-size: 12px;
  }
  #page section.contact .button{
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.4);
    margin-top: 20px;
  }
  #page section.contact .button a{
    font-size: 20px;
    padding: 9px 53px;
  }
}



/* ***************************************************** */
/* ********************* about us team *********************** */
#page.aboutus section.team{
  background-image: url('/images/aboutus/team_bg.jpg');
  position: relative;
  padding-top: 100px;
  padding-bottom: 110px;
}
#page.aboutus section.team .row{
  /* display: flex;
  justify-content: space-between; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  z-index: 2;
  /* gap: 80px; */
}
#page.aboutus section.team .row > div{
  text-align: center;
}
#page.aboutus section.team .row p{
  color: #fff;
  font-size: 25px;
  margin-top: 10px;
}
#page.aboutus section.team .row > div .img{
  position: relative;
}
#page.aboutus section.team .row > div .img::after{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('/images/aboutus/spot.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
}
#page.aboutus section.team .row > div:last-of-type .img::after{
  display: none;
}
#page.aboutus section.team hr{
  position: absolute;
  top: 44%;
  /* right: 0; */
  width: 100%;
  color: #fff;
  opacity: 0.1;
  z-index: 1;
}
@media screen and (max-width : 768px){
  #page.aboutus section.team{
    padding: 50px 0;
  }
  #page.aboutus section.team .row{
    grid-template-columns: repeat(3, 1fr);
    row-gap: 10px;
  }
  #page.aboutus section.team .row > div .img::after{
    width: 8px;
    height: 8px;
    right: -4px;
  }
  #page.aboutus section.team .row > div:nth-child(3) .img::after{
    display: none;
  }
  #page.aboutus section.team .row p{
    font-size: 16px;
    margin-top: 0;
  }
  #page.aboutus section.team hr{
    display: none;
  }
  #page.aboutus section.team .row > div img{
    width: 110px;
  }
}
/* ********************* intro *********************** */
#page.aboutus section.intro{
  background-image: url('/images/aboutus/intro_bg.jpg');
  padding: 170px 0;
}
#page.aboutus section.intro .row > div{
  text-align: center;
}
#page.aboutus section.intro h1{
  font-size: 65px;
  font-weight: 700;
  margin-bottom: 50px;
}
#page.aboutus section.intro p{
  font-size: 27px;
}
@media screen and (max-width : 768px){
  #page.aboutus section.intro{
    padding: 50px 0;
  }
  #page.aboutus section.intro h1{
    font-size: 28px;
    margin-bottom: 20px;
  }
  #page.aboutus section.intro p{
    font-size: 12px;
  }
}
/* ********************* intro-detail *********************** */
#page.aboutus section.intro-detail{
  padding: 66px 0 116px 0;
}
#page.aboutus section.intro-detail .row > div{
  display: flex;
  align-items: center;
  position: relative;
  margin: 84px 0;
}
#page.aboutus section.intro-detail .row > div.fade-left{
  animation-duration: 1.5s;
}
#page.aboutus section.intro-detail .row > div.fade-right{
  animation-duration: 1.5s;
}
#page.aboutus section.intro-detail .row > div:nth-child(2n){
  flex-direction: row-reverse;
}
#page.aboutus section.intro-detail .row > div > div{
  flex: 1;
}
#page.aboutus section.intro-detail .row .des{
  position: relative;
  z-index: 2;
}
#page.aboutus section.intro-detail .row .des h2{
  font-size: 48px;
  margin-bottom: 40px;
}
#page.aboutus section.intro-detail .row .des p{
  font-size: 22px;
}
#page.aboutus section.intro-detail .row > div:nth-child(2n) .img{
  text-align: right;
}
#page.aboutus section.intro-detail .row .img img{
  /* X, Y, Blur, Spread, 색상 */
  box-shadow: 0 0 29px 10px rgba(139, 139, 139, 0.3);
  border-radius: 30px;
}
#page.aboutus section.intro-detail .row .des h2::before,
#page.aboutus section.intro-detail .row .des h2::after{
  content: '';
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  vertical-align: text-top;
}
#page.aboutus section.intro-detail .row .des h2::before{
  width: 14px;
  height: 21px;
  background-image: url('/images/aboutus/mark.png');
  margin: 2px 4px 0 0;
}
#page.aboutus section.intro-detail .row .des h2::after{
  width: 15px;
  height: 21px;
  background-image: url('/images/aboutus/mark2.png');
  margin: 2px 0px 0 4px;
}
#page.aboutus section.intro-detail .row > div .num_bg{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}
#page.aboutus section.intro-detail .row > div:nth-child(2n) .num_bg{
  right: 50%;
}
@media screen and (max-width : 1024px){
  #page.aboutus section.intro-detail .row > div{
    gap: 20px;
  }
}
@media screen and (max-width : 768px){
  #page.aboutus section.intro-detail{
    padding: 40px 0;
  }
  #page.aboutus section.intro-detail .row > div{
    flex-direction: column;
    margin: 20px 0;
  }
  #page.aboutus section.intro-detail .row > div:nth-child(2n){
    flex-direction: column;
  }
  #page.aboutus section.intro-detail .row .des h2{
    font-size: 24px;
    margin-bottom: 10px;
  }
  #page.aboutus section.intro-detail .row .des p{
    font-size: 12px;
  }
  #page.aboutus section.intro-detail .row .des h2::before,
  #page.aboutus section.intro-detail .row .des h2::after{
    width: 5px;
    height: 7px;
  }
  #page.aboutus section.intro-detail .row > div .num_bg{
    width: 122px;
  }
  #page.aboutus section.intro-detail .row > div:nth-child(2n) .num_bg{
    right: 0;
  }
}




/* ***************************************************** */
/* ********************* contact *********************** */
#page.contact section.intro{
  margin: auto;
  text-align: center;
  padding: 170px 0;
}
#page.contact section.intro h2{
  font-size: 38px;
  line-height: 1.5;
}
#page.contact section.intro h2.first::before{
  content: '';
  display: inline-block;
  width: 74px;
  height: 50px;
  background-image: url('/images/contact/mark.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  margin: 0 18px 6px 0;
}
#page.contact section.intro h2.first::after{
  content: '';
  display: inline-block;
  width: 74px;
  height: 50px;
  background-image: url('/images/contact/mark2.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  margin: 0 0px 6px 18px;
}
@media screen and (max-width : 1024px){
  #page.contact section.intro h2{
    font-size: 30px;
  }
}
@media screen and (max-width : 768px){
  #page.contact section.intro{
    padding: 60px 0;
  }
  #page.contact section.intro h2{
    font-size: 14px;
  }
  #page.contact section.intro h2.first::before,
  #page.contact section.intro h2.first::after{
    width: 17px;
    height: 12px;
  }
  #page.contact section.intro h2.first::before{
    margin: 0 6px 2px 0;
  }
  #page.contact section.intro h2.first::after{
    margin: 0 0 2px 6px;
  }
}
/* ********************* form *********************** */
#page.contact section.contact-box{
  background-image: url('/images/contact/contact_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 154px;
  padding-bottom: 196px;
}
#page.contact section.contact-box .container{
  max-width: 1086px;
}
@media screen and (max-width : 1200px){
  #page.contact section.contact-box .container{
    max-width: 992px;
  }
}
@media screen and (max-width : 1100px){
  #page.contact section.contact-box .container{
    max-width: 892px;
  }
}
#page.contact section.contact-box table{
  width: 100%;
  margin-left: -48px;
  /* border-collapse: separate;
  border-spacing: 0 30px; */
}
#page.contact section.contact-box table tr{
  /* display: block;
  width: 100% */
}
#page.contact section.contact-box table td{
  padding-bottom: 30px;
}
#page.contact section.contact-box table .content td{
  padding-bottom: 25px;
}
#page.contact section.contact-box table .check td{
  padding-bottom: 0px;
}
#page.contact section.contact-box .t-title{
  color: #fff;
  font-size: 22px;
  width: 108px;
}
#page.contact section.contact-box .content .t-title{
  vertical-align: top;
}
#page.contact section.contact-box input,
#page.contact section.contact-box textarea{
  border-radius: 10px;
  width: 100%;
  padding: 10px;
}
#page.contact section.contact-box .name input,
#page.contact section.contact-box .tel input{
  height: 65px;
}
#page.contact section.contact-box textarea{
  height: 355px;
  vertical-align: top;
}
#page.contact section.contact-box .check input{
  width: unset;
}
#page.contact section.contact-box .check{
  color: #fff;
  font-size: 18px;
}
#page.contact section.contact-box .check td:last-child{
  display: flex;
  align-items: center;
}
input, button, select, optgroup, textarea{
  font-size: 18px;
}
/* 체크박스 커스텀 */
#page.contact input[type=checkbox]#is-privacy{
  display: none;
}
#page.contact input[type=checkbox]#is-privacy+label {
	display: inline-block;
	/* margin-bottom:-6px; */
	position: relative;
	width: 23px;
	height: 23px;
	/* border: 2px solid #fff; */
  background-color: #fff;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.1s ease;
  vertical-align: middle;
}
#page.contact input[type=checkbox]#is-privacy+label::after {
  font-family: Arial, sans-serif !important;
  content: '✔'; /* 체크 아이콘 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* 기본은 안 보이게 설정 */
  font-size: 20px;
  transition: transform 0.1s ease;
  color: #ec5716;
  /* opacity: 1; */
}
#page.contact input[type=checkbox]#is-privacy:checked+label::after {
  transform: translate(-50%, -50%) scale(1); /* 체크되면 표시 */
  /* opacity: 1; */
}
#page.contact section.contact-box .submit{
  text-align: center;
  margin-top: 80px;
}
#page.contact section.contact-box .submit button{
  font-size: 35px;
  color: #fff;
  padding: 20px 108px;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 45px;
  overflow: hidden;
  /* box-shadow: 0 0 4px #fff, 0 0 10px #fff; */
  animation: flicker 1s infinite;
}
@keyframes flicker {
    0%, 100% { box-shadow: 0 0 4px #fff, 0 0 10px #fff; }
    50% { box-shadow: 0 0 8px #fff, 0 0 20px #fff; }
}

@media screen and (max-width : 1100px){
  #page.contact section.contact-box table{
    margin-left: 0px;
  }
}
@media screen and (max-width: 768px){
  #page.contact section.contact-box{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #page.contact section.contact-box table tr{
    display: flex;
    flex-direction: column;
  }
  #page.contact section.contact-box table td{
    padding-bottom: 0px;
  }
  #page.contact section.contact-box table .content td{
    padding-bottom: 0px;
  }
  #page.contact section.contact-box table tr td:nth-child(2){
    padding-bottom: 10px;
  }
  #page.contact section.contact-box .t-title{
    font-size: 16px;
    width: 80px;
  }
  #page.contact section.contact-box .check{
    font-size: 12px;
  }
  #page.contact input[type=checkbox]#is-privacy+label{
    width: 15px;
    height: 15px;
    border-radius: 2px;
  }
  #page.contact input[type=checkbox]#is-privacy+label::after{
    font-size: 16px;
  }
  #page.contact section.contact-box .submit{
    margin-top: 30px;
  }
  #page.contact section.contact-box .submit button{
    font-size: 24px;
    padding: 10px 54px;
    border-radius: 25px;
  }
}



/* ***************************************************** */
/* ********************* service-banner[공통] *********************** */
#page section.service-banner{
  height: 914px;
  padding-top: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#page.search section.service-banner{
  background-image: url('/images/service/search/search_banner.jpg');
}
#page.media section.service-banner{
  background-image: url('/images/service/media/media_banner.jpg');
}
#page.display section.service-banner{
  background-image: url('/images/service/display/display_banner.jpg');
}
#page.social section.service-banner{
  background-image: url('/images/service/social/social_banner.jpg');
}
#page.viral section.service-banner{
  background-image: url('/images/service/viral/viral_banner.jpg');
}
#page.total section.service-banner{
  background-image: url('/images/service/total/total_banner.jpg');
}

#page.aboutus section.service-banner{
  background-image: url('/images/aboutus/aboutus_banner.jpg');
}
#page.contact section.service-banner{
  background-image: url('/images/contact/contact_banner.jpg');
}
#page section.service-banner > *{
  text-align: center;
}
#page section.service-banner-ex .row div{
  text-align: center;
}
#page section.service-banner .txt-box{
  background-color: rgba(9, 6, 4, 0.3);
}
#page section.service-banner .txt-box p{
  font-size: 34px;
  margin-top: 70px;
  font-weight: 700;
  text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.3);
}
#page section.service-banner .txt-box h2{
  font-size: 55px;
  margin-top: 30px;
  margin-bottom: 70px;
  text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.4);
}
#page section.service-banner .txt-box h2::before{
  content: '';
  display: inline-block;
  width: 31px;
  height: 25px;
  vertical-align: text-top;
  margin-top: 7px;
  background-image: url('/images/service/s_mark.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#page section.service-banner .txt-box h2::after{
  content: '';
  display: inline-block;
  width: 30px;
  height: 25px;
  vertical-align: text-top;
  margin-top: 7px;
  background-image: url('/images/service/s_mark2.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
@media screen and (max-width : 768px){
  #page section.service-banner{
    height: 600px;
    padding-top: 80px;
  }
  #page section.service-banner .img{
    padding: 0 60px;
  }
  #page section.service-banner .txt-box .top{
    font-size: 13px;
    padding: 6px 20px;
    margin-top: -15px;
  }
  #page section.service-banner .txt-box p{
    font-size: 16px;
    margin-top: 30px;
  }
  #page section.service-banner .txt-box h2{
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 40px;
  }
  #page section.service-banner .txt-box h2::before,
  #page section.service-banner .txt-box h2::after{
    width: 18px;
    height: 15px;
    margin-top: 4px;
  }
}
/* ********************* tab[공통] *********************** */
/* #page section.tab .row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 134px 0 84px 0;
}
#page section.tab .row > div{
  text-align: center;
  border-bottom: 1px solid #d5d5d5;
  position: relative;
}
#page section.tab .row > div a{
  display: block;
  font-size: 25px;
  padding: 20px 0 15px 0;
}
#page section.tab .row > div.active{
  border-bottom: 3px solid #ea5514;
}
#page section.tab .row > div.active a{
  color: #ea5514;
}
#page section.tab .row > div::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0%;
  height: 3px;
  background-color: #ea5514;
  transition: width 0.3s ease;
}
#page section.tab .row > div:hover::after{
  width: 100%;
}
#page section.tab .row > div.active:hover::after{
  width: 0;
}
@media screen and (max-width : 768px){
  #page section.tab .row{
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 0;
  }
  #page section.tab .row > div a{
    font-size: 16px;
    padding: 10px 0 7px 0;
  }
  #page section.tab .row > div:hover::after{
    width: 0;
  }
} */
/* ********************* intro[공통] *********************** */
#page section.intro{
  padding: 130px 0;
  background-attachment: fixed;
}
@media screen and (max-width : 768px){
  #page section.intro{
    padding: 50px 0;
  }
}
#page.search section.intro{
  background-image: url('/images/service/search/intro_bg.jpg');
}
#page.media section.intro{
  background-image: url('/images/service/media/intro_bg.jpg');
}
#page.display section.intro{
  background-image: url('/images/service/display/intro_bg.jpg');
}
#page.social section.intro{
  background-image: url('/images/service/social/intro_bg.jpg');
}
#page.viral section.intro{
  background-image: url('/images/service/viral/intro_bg.jpg');
}
#page.total section.intro{
  background-image: url('/images/service/total/intro_bg.jpg');
}
/* ********************* why[공통] *********************** */
#page.search section.why{
  background-image: url('/images/service/search/why_bg.jpg');
  padding: 115px 0 150px 0;
}
#page.display section.why{
  background-image: url('/images/service/display/why_bg.jpg');
  padding: 115px 0 150px 0;
}
#page.total section.why{
  background-image: url('/images/service/total/why_bg.jpg');
  padding: 115px 0 150px 0;
}
#page section.why .title h2,
#page section.why .title h2 span{
  font-size: 58px;
}
#page section.why .title p{
  text-align: center;
  font-size: 24px;
  margin: 30px 0 75px 0;
}
#page section.why .content{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  column-gap: 70px;
  row-gap: 60px;
  padding: 0 25px;
}
#page section.why .content > div.empty{
  opacity: 0 !important;
}
#page section.why .content > div{
  text-align: center;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 13px 4px 13px rgba(0, 0, 0, 0.3);
  padding: 40px 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
#page section.why .content > div.active{
  opacity: 1;
  transform: translateY(0px);
}
#page section.why .content > div h4{
  font-weight: 700;
  font-size: 22px;
  margin: 25px 0 15px 0;
}
#page section.why .content > div p{
  font-size: 16px;
}
@media screen and (max-width : 1024px){
  #page section.why{
    padding: 75px 0 90px 0;
  }
}
@media screen and (max-width : 768px){
  #page section.why{
    padding: 60px 0 !important;
  }
  #page section.why .title h2,
  #page section.why .title h2 span{
    font-size: 24px;
  }
  #page section.why .title p{
    font-size: 18px;
    margin: 12px 0 30px 0;
  }
  #page section.why .content{
    grid-template-columns: repeat(1, 1fr);
    column-gap: 15px;
    row-gap: 10px;
    padding: 0px;
  }
  #page section.why .content > div.empty{
    display: none;
  }
  #page section.why .content > div{
    padding: 10px 20px;
    text-align: left;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  #page section.why .content > div h4{
    font-size: 16px;
    margin: 0px 0 5px 0;
  }
  #page section.why .content > div p{
    font-size: 12px;
  }
  #page section.why .content > div img{
    width: 80px;
  }
}
/* ********************* process[공통] *********************** */
#page section.process{
  padding: 105px 0;
}
#page section.process .title p{
  font-size: 32px;
  text-align: center;
}
#page section.process .content{
  margin-top: 74px;
}
#page section.process .content > div{
  padding: 0 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  gap: 60px;
}
#page section.process .content > div:first-child{
  margin-bottom: 40px;
}
#page section.process .content .step{
  height: 266px;
  text-align: center;
  box-shadow: 0 0 24px rgba(230, 230, 230, 0.8);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
#page section.process .content .step.glow{
  background-color: #fff7f3;
  animation: pulseGlow 1.2s infinite ease-in-out;
}
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 12px rgba(236, 87, 22, 0.3);
  }
  50% {
    box-shadow: 0 0 24px rgba(236, 87, 22, 0.8);
  }
  100% {
    box-shadow: 0 0 12px rgba(236, 87, 22, 0.3);
  }
}
#page section.process .content .des h4{
  font-weight: 700;
  font-size: 28px;
  margin: 20px 0 10px 0;
}
#page section.process .content .des p{
  font-size: 20px;
}
#page section.process .content .step::after{
  content: '';
  width: 19px;
  height: 35px;
  background-image: url('/images/service/search/arrow.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: -46px;
  transform: translateY(-50%);
}
#page section.process .content .step:nth-child(3)::after,
#page section.process .content .step:last-child::after{
  display: none;
}
@media screen and (max-width : 1280px){
  #page section.process .content > div{
    padding: 0 35px;
  }
}
@media screen and (max-width : 1024px){
  #page section.process .title p{
    font-size: 30px;
  }
  #page section.process .content .des h4{
    font-size: 24px;
  }
  #page section.process .content .des p{
    font-size:18px;
  }
}
@media screen and (max-width : 768px){
  #page section.process{
    padding: 60px 0;
  }
  #page section.process .content{
    margin-top: 30px;
  }
  #page section.process .content > div{
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    gap: 10px;
  }
  #page section.process .title p{
    font-size: 18px;
  }
  #page section.process .content .step{
    height: 180px;
    padding: 0 5px;
  }
  #page section.process .content .step img{
    width: 60px;
  }
  #page section.process .content .des h4{
    font-size: 16px;
    margin: 10px 0 5px 0;
  }
  #page section.process .content .des p{
    font-size: 12px;
  }
  #page section.process .content .step::after{
    display: none;
  }
}



/* ********************* marketing *********************** */
/* ********************* search *********************** */
#page.search section.marketing{
  background-color: #eee;
  padding: 117px 0 100px 0;
}
#page.search section.marketing .what{
  padding: 0 62px;
  display: flex;
  gap: 62px;
  align-items: center;
  margin-bottom: 80px;
}
#page.search section.marketing .what .des h2{
  font-size: 52px;
  margin-bottom: 20px;
}
#page.search section.marketing .what .des p{
  font-size: 22px;
}
#page.search section.marketing hr{
  color: #858585;
}
#page.search section.marketing .web{
  padding: 100px 120px 0 140px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 40px;
}
#page.search section.marketing .web .site{
  position: relative;
}
#page.search section.marketing .web .icon{
  position: absolute;
  top: -11%;
  left: -5%;
  animation: floatUpDown 1.5s ease-in-out infinite;
}
@keyframes floatUpDown {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}
@media screen and (max-width : 768px){
  #page.search section.marketing{
    padding: 50px 0;
  }
  #page.search section.marketing .what{
    padding: 0;
    gap: 10px;
    margin-bottom: 40px;
  }
  #page.search section.marketing .what .des h2{
    font-size: 24px;
    margin-bottom: 10px;
  }
  #page.search section.marketing .what .des p{
    font-size: 12px;
  }
  #page.search section.marketing .web{
    padding: 40px 0 0 10px;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0px;
    row-gap: 10px;
  }
  #page.search section.marketing .web .icon{
    width: 30%;
    top: -8%;
    left: -6%;
  }
}
/* ********************* suggest *********************** */
#page.search section.suggest{
  padding-top: 105px;
}
#page.search section.suggest .title h2 span{
  font-size: 55px;
}
#page.search section.suggest .content{
  background-image: url('/images/service/search/suggest_bg.jpg');
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 86px;
}
#page.search section.suggest .content > div{
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid #aaa;
  text-align: center;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.3s ease;
}
#page.search section.suggest .content h4,
#page.search section.suggest .content p{
  color: #fff;
  transition: letter-spacing 0.3s ease;
}
#page.search section.suggest .content h4{
  font-size: 20px;
  margin-bottom: 30px;
}
#page.search section.suggest .content p{
  font-size: 22px;
}
#page.search section.suggest .content > div:hover,
#page.search section.suggest .content > div.active{
  background-color: rgba(0, 0, 0, 0.3);
}
#page.search section.suggest .content > div:hover h4,
#page.search section.suggest .content > div:hover p,
#page.search section.suggest .content > div.active h4,
#page.search section.suggest .content > div.active p{
  letter-spacing: 0.7px;
}
@media screen and (max-width : 768px){
  #page.search section.suggest{
    padding-top: 60px;
  }
  #page.search section.suggest .title h2 span{
    font-size: 24px;
  }
  #page.search section.suggest .content{
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30px;
  }
  #page.search section.suggest .content > div{
    height: 120px;
    padding: 0 5px;
  }
  #page.search section.suggest .content h4{
    font-size: 16px;
    margin-bottom: 10px;
  }
  #page.search section.suggest .content p{
    font-size: 12px;
  }
}




/* ********************* marketing *********************** */
/* ********************* media *********************** */
/* ********************* what *********************** */
#page.media section.what{
  background-color: #eee;
  padding: 96px 0 92px 0;
}
#page.media section.what .row > div{
  display: flex;
  align-items: center;
  gap: 120px;
  padding: 64px 0;
}
#page.media section.what .row > div.fade-right{
  animation-duration: 1.5s;
}
#page.media section.what .row > div.fade-left{
  animation-duration: 1.5s;
}
#page.media section.what .row img{
  box-shadow: -3px 5px 30px 18px rgba(0, 0, 0, 0.4);
  border-radius: 15px;
}
#page.media section.what .row .des h2{
  font-size: 40px;
  margin-bottom: 30px;
}
#page.media section.what .row .des p{
  font-size: 22px;
  line-height: 1.7;
}
#page.media section.what .row > div:nth-child(2n){
  flex-direction: row-reverse;
  justify-content: space-between;
}
@media screen and (max-width : 768px){
  #page.media section.what{
    padding: 60px 0;
  }
  #page.media section.what .row > div{
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding: 30px 0;
  }
  #page.media section.what .row > div:nth-child(2n){
    flex-direction: column;
  }
  #page.media section.what .row .des h2{
    font-size: 24px;
    margin-bottom: 10px;
  }
  #page.media section.what .row .des p{
    font-size: 12px;
  }
}
/* ********************* benefit *********************** */
#page.media section.benefit{
  padding: 210px 0 105px 0;
}
#page.media section.benefit .title p{
  font-size: 25px;
  text-align: center;
  margin-top: 30px;
}
#page.media section.benefit .content{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  column-gap: 90px;
  row-gap: 60px;
  width: fit-content;
  margin: auto;
  text-align: center;
  margin-top: 80px;
}
#page.media section.benefit .content > div{
  max-width: 340px;
}
#page.media section.benefit .content .des{
  margin-top: 20px;
}
#page.media section.benefit .content .des h4{
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}
#page.media section.benefit .content .des p{
  font-size: 20px;
}
@media screen and (max-width : 768px){
  #page.media section.benefit{
    padding: 60px 0;
  }
  #page.media section.benefit .title p{
    font-size: 14px;
    margin-top: 10px;
  }
  #page.media section.benefit .content{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 20px;
    margin-top: 30px;
  }
  #page.media section.benefit .content .des{
    margin-top: 10px;
  }
  #page.media section.benefit .content .des h4{
    font-size: 16px;
    margin-bottom: 5px;
  }
  #page.media section.benefit .content .des p{
    font-size: 12px;
  }
}
/* ********************* cost *********************** */
#page.media section.cost{
  background-image: url('/images/service/media/cost_bg.jpg');
  padding: 160px 0 200px 0;
}
#page.media section.cost h2{
  text-align: center;
  font-size: 65px;
  margin-bottom: 70px;
}
#page.media section.cost .content{
  display: flex;
  justify-content: space-between;
}
#page.media section.cost .content > div{
  background-color: #fff;
  border-radius: 30px;
  overflow: hidden;
  width: 350px;
  height: 490px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
#page.media section.cost .content > div.active{
  opacity: 1;
  transform: translateY(0px);
}
#page.media section.cost text{
  font-size: 32px;
  font-weight: 700;
}
#page.media section.cost .des{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* gap: 16px; */
}
#page.media section.cost .des .price{
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 16px;
}
#page.media section.cost .des .price .num{
  font-size: 60px;
  font-weight: 700;
}
#page.media section.cost .des .price .gray{
  color: #666;
}
#page.media section.cost .des .tags{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto;
}
#page.media section.cost .des .tag{
  width: fit-content;
  border-radius: 20px;
  padding: 4px 15px;
  font-size: 20px;
  background-color: #fcece0;
  color: #f87616;
}
#page.media section.cost .des p{
  margin-top: 32px;
  padding: 0 30px;
}
#page.media section.cost .special .price{
  font-size: 38px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 28px;
}
#page.media section.cost .vat{
  font-size: 18px;
  color: #ddd;
  text-align: right;
  padding-bottom: 10px;
}
@media screen and (max-width : 1280px){
  #page.media section.cost .content{
    gap: 10px;
  }
  #page.media section.cost .des p{
    margin-top: 10px;
    padding: 0 10px;
  }
}
@media screen and (max-width : 768px){
  #page.media section.cost{
    padding: 60px 0;
  }
  #page.media section.cost h2{
    font-size: 30px;
    margin-bottom: 30px;
  }
  #page.media section.cost .content{
    flex-wrap: wrap;
  }
  #page.media section.cost .content > div{
    border-radius: 15px;
    width: 48%;
    height: 340px;
  }
  #page.media section.cost .des .price{
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 5px;
  }
  #page.media section.cost .des .price .num{
    font-size: 36px;
  }
  #page.media section.cost .des .tag{
    padding: 3px 10px;
    font-size: 12px;
  }
  #page.media section.cost .des p{
    margin-top: 20px;
    font-size: 12px;
  }
  #page.media section.cost .special .price{
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 13px;
  }
  #page.media section.cost .vat{
    font-size: 12px;
    padding-bottom: 5px;
  }
}



/* ********************* marketing *********************** */
/* ********************* display *********************** */
#page.display section.way{
  background-color: #eee;
  padding: 117px 0 100px 0;
}
#page.display section.way .what{
  padding: 0 62px;
  display: flex;
  gap: 62px;
  align-items: center;
  margin-bottom: 80px;
}
#page.display section.way .what .des h2{
  font-size: 52px;
  margin-bottom: 20px;
}
#page.display section.way .what .des p{
  font-size: 22px;
}
#page.display section.way hr{
  color: #858585;
}
#page.display section.way .what img{
  min-width: 145px;
}
#page.display section.way .network{
  padding: 66px 0;
}
#page.display section.way .network > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 64px 0;
}
#page.display section.way .network > div:nth-child(2n){
  flex-direction: row-reverse;
}
#page.display section.way .network > div:nth-child(2n) .img{
  text-align: right;
}
#page.display section.way .network > div > div{
  flex: 1;
}
#page.display section.way .network .img img{
  border-radius: 15px;
  box-shadow: -3.6px -4.8px 38px 7px rgba(0, 0, 0, 0.5);
}
#page.display section.way .network .txt{
  max-width: 624px;
}
#page.display section.way .network .txt .name{
  display: flex;
  align-items: center;
  gap : 13px;
  font-size: 40px;
  margin-bottom: 30px;
}
#page.display section.way .network .txt .des p{
  font-size: 22px;
  line-height: 1.7;
}
#page.display section.way .network > div.fade-right{
  animation-duration: 1.5s;
}
#page.display section.way .network > div.fade-left{
  animation-duration: 1.5s;
}
@media screen and (max-width : 768px){
  #page.display section.way{
    padding: 50px 0;
  }
  #page.display section.way .what{
    padding: 0;
    gap: 10px;
    margin-bottom: 40px;
  }
  #page.display section.way .what .des h2{
    font-size: 24px;
    margin-bottom: 10px;
  }
  #page.display section.way .what .des p{
    font-size: 12px;
  }
  #page.display section.way .what img{
    min-width: 80px;
  }
  #page.display section.way .network > div,
  #page.display section.way .network > div:nth-child(2n){
    flex-direction: column;
    gap: 20px;
    padding: 30px 0;
  }
  #page.display section.way .network .txt .name{
    gap : 5px;
    font-size: 18px;
    margin-bottom: 10px;
  }
  #page.display section.way .network .txt .des p{
    font-size: 12px;
  }
  #page.display section.way .network .txt img{
    width: 24px;
  }
}
/* ********************* brand *********************** */
#page.display section.brand,
#page.viral section.brand{
  padding: 210px 0 105px 0;
}
#page.display section.brand .title span,
#page.viral section.brand .title span{
  font-size: 55px;
}
#page.display section.brand .title,
#page.viral section.brand .title{
  margin-bottom: 80px;
}
#page.display section.brand .swiper-box,
#page.viral section.brand .swiper-box{
  position: relative;
}
#page.display section.brand .swiper-button-next,
#page.display section.brand .swiper-button-prev,
#page.viral section.brand .swiper-button-next,
#page.viral section.brand .swiper-button-prev{
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}
#page.display section.brand .swiper-button-prev,
#page.viral section.brand .swiper-button-prev{
  left: -50px;
}
#page.display section.brand .swiper-button-next,
#page.viral section.brand .swiper-button-next{
  right: -50px;
}
#page.display section.brand .swiper-slide,
#page.viral section.brand .swiper-slide{
  padding-top: 27px;
  background-color: #f1f1f1;
  border-radius: 30px;
  overflow: hidden;
}
#page.display section.brand .swiper-slide .icon,
#page.viral section.brand .swiper-slide .icon{
  padding-left: 27px;
}
#page.display section.brand .swiper-slide .txt,
#page.viral section.brand .swiper-slide .txt{
  padding: 0 27px;
}
#page.display section.brand .swiper-slide h3,
#page.viral section.brand .swiper-slide h3{
  font-size: 24px;
  font-weight: 700;
  margin: 18px 0 28px 0;
}
#page.display section.brand .swiper-slide h4,
#page.viral section.brand .swiper-slide h4{
  font-weight: 700;
  font-size: 18px;
  margin: 35px 0;
}
@media screen and (max-width : 768px){
  #page.display section.brand,
  #page.viral section.brand{
    padding: 60px 0;
  }
  #page.display section.brand .title span,
  #page.viral section.brand .title span{
    font-size: 24px;
  }
  #page.display section.brand .title,
  #page.viral section.brand .title{
    margin-bottom: 30px;
  }
  #page.display section.brand .swiper-slide,
  #page.viral section.brand .swiper-slide{
    padding-top: 10px;
    border-radius: 15px;
  }
  #page.display section.brand .swiper-slide .icon img,
  #page.viral section.brand .swiper-slide .icon img{
    width: 24px;
  }
  #page.display section.brand .swiper-slide .icon,
  #page.viral section.brand .swiper-slide .icon{
    padding-left: 8px;
  }
  #page.display section.brand .swiper-slide .txt,
  #page.viral section.brand .swiper-slide .txt{
    padding: 0 8px;
  }
  #page.display section.brand .swiper-slide h3,
  #page.viral section.brand .swiper-slide h3{
    font-size: 18px;
    margin: 9px 0 14px 0;
  }
  #page.display section.brand .swiper-slide p,
  #page.viral section.brand .swiper-slide p{
    font-size: 12px;
  }
  #page.display section.brand .swiper-slide h4,
  #page.viral section.brand .swiper-slide h4{
    font-size: 12px;
    margin: 20px 0;
  }
  #page.display section.brand .swiper-slide:first-child h4,
  #page.viral section.brand .swiper-slide:first-child h4{
    width: max-content;
  }
}



/* ********************* marketing *********************** */
/* ********************* social *********************** */
#page.social section.point{
  padding: 210px 0 105px 0;
}
#page.social section.point .contents{
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
}
#page.social section.point .contents > div{
  /* margin: auto; */
  text-align: center;
  background-color: #fff7f3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 460px;
  height: 330px;
  padding: 0 50px;
}
#page.social section.point .contents .des h4{
  font-weight: 700;
  font-size: 32px;
  margin: 30px 0 15px 0;
}
#page.social section.point .contents .des p{
  font-size: 22px;
}
#page.social section.point .contents > div:first-child img{
  margin-right: -11px;
}
@media screen and (max-width : 768px){
  #page.social section.point{
    padding: 60px 0 30px 0;
  }
  #page.social section.point .contents{
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
  }
  #page.social section.point .contents > div{
    padding: 0 10px;
    height: 140px;
  }
  #page.social section.point .contents > div img{
    height: 50px;
  }
  #page.social section.point .contents .des h4{
    font-size: 16px;
    margin: 10px 0 5px 0;
  }
  #page.social section.point .contents .des p{
    font-size: 12px;
  }
}
/* ********************* how *********************** */
#page.social section.how{
  padding: 105px 0 210px 0;
}
#page.social section.how .row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#page.social section.how .title h2{
  font-size: 45px;
}
#page.social section.how .row > div{
  text-align: center;
  color: #fff;
  max-height: 480px;
  height: 406px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#page.social section.how .row > div > *{
  position: relative;
  z-index: 1;
}
#page.social section.how .row > div::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
  z-index: 0;
}
#page.social section.how .row > div:hover::before{
  transform: scale(1.15);
}
#page.social section.how .one::before{
  background-image: url('/images/service/social/how1.jpg')
}
#page.social section.how .two::before{
  background-image: url('/images/service/social/how2.jpg')
}
#page.social section.how .three::before{
  background-image: url('/images/service/social/how3.jpg')
}
#page.social section.how .four::before{
  background-image: url('/images/service/social/how4.jpg')
}
#page.social section.how .five::before{
  background-image: url('/images/service/social/how5.jpg')
}
#page.social section.how .row > div h4{
  font-weight: 700;
  font-size: 30px;
  margin: 40px 0 34px 0;
}
#page.social section.how .row > div p{
  font-size: 20px;
}
#page.social section.how .row > div:last-child img{
  margin-right: -12px;
}
@media screen and (max-width : 768px){
  #page.social section.how{
    padding: 60px 0;
  }
  #page.social section.how .row{
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  #page.social section.how .title h2{
    font-size: 24px;
  }
  #page.social section.how .row > div{
    height: 180px;
    padding: 0 20px;
  }
  #page.social section.how .row > div h4{
    font-size: 18px;
    margin: 10px 0 5px 0;
  }
  #page.social section.how .row > div p{
    font-size: 12px;
  }
  #page.social section.how .row > div img{
    height: 40px;
  }
  #page.social section.how .row > div:first-child{
    height: unset;
    margin-bottom: 30px;
    padding: 0;
  }
}
/* ********************* sns *********************** */
#page.social section.sns{
  background-color: #eee;
  padding: 90px 0 210px 0;
}
#page.social section.sns .contents > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 10px; */
  /* padding: 30px 0; */
}
#page.social section.sns .contents > div:nth-child(2n){
  flex-direction: row-reverse;
  padding-bottom: 50px;
}
#page.social section.sns .contents > div:nth-child(2n) .img{
  text-align: right;
}
#page.social section.sns .contents > div > div{
  flex: 1;
}
#page.social section.sns .contents .txt{
  max-width: 624px;
}
#page.social section.sns .contents .txt .name{
  display: flex;
  align-items: center;
  gap : 13px;
  font-size: 40px;
  margin-bottom: 30px;
}
#page.social section.sns .contents .txt .des p{
  font-size: 22px;
  line-height: 1.7;
}
#page.social section.sns .contents > div.fade-left,
#page.social section.sns .contents > div.fade-right{
  animation-duration: 1.5s;
}
@media screen and (max-width : 768px){
  #page.social section.sns{
    padding: 60px 0;
  }
  #page.social section.sns .contents > div,
  #page.social section.sns .contents > div:nth-child(2n){
    flex-direction: column;
    gap: 20px;
    padding: 30px 0;
  }
  #page.social section.sns .contents .txt{
    margin-right: auto;
  }
  #page.social section.sns .contents .txt .name{
    gap : 5px;
    font-size: 18px;
    margin-bottom: 10px;
  }
  #page.social section.sns .contents .txt .des p{
    font-size: 12px;
  }
  #page.social section.sns .contents .txt img{
    width: 24px;
  }
}



/* ********************* marketing *********************** */
/* ********************* viral *********************** */
#page.viral section.point{
  padding: 210px 0 105px 0;
}
#page.viral section.point .contents{
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
}
#page.viral section.point .contents > div{
  /* margin: auto; */
  text-align: center;
  background-color: #fff7f3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 460px;
  height: 330px;
  padding: 0 50px;
}
#page.viral section.point .contents .des h4{
  font-weight: 700;
  font-size: 32px;
  margin: 30px 0 15px 0;
}
#page.viral section.point .contents .des p{
  font-size: 22px;
}
#page.viral section.point .contents > div:first-child img{
  margin-right: -11px;
}
@media screen and (max-width : 768px){
  #page.viral section.point{
    padding: 60px 0 30px 0;
  }
  #page.viral section.point .contents{
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
  }
  #page.viral section.point .contents > div{
    padding: 0 10px;
    height: 140px;
  }
  #page.viral section.point .contents > div img{
    height: 50px;
  }
  #page.viral section.point .contents .des h4{
    font-size: 16px;
    margin: 10px 0 5px 0;
  }
  #page.viral section.point .contents .des p{
    font-size: 12px;
  }
}
/* ********************* what *********************** */
#page.viral section.what{
  background-color: #eee;
  padding: 96px 0 92px 0;
}
#page.viral section.what .row > div{
  display: flex;
  align-items: center;
  padding: 64px 0;
}
#page.viral section.what .row > div > div{
  flex: 1;
}
#page.viral section.what .row > div.fade-right{
  animation-duration: 1.5s;
}
#page.viral section.what .row > div.fade-left{
  animation-duration: 1.5s;
}
#page.viral section.what .row img{
  box-shadow: -3px 5px 30px 18px rgba(0, 0, 0, 0.4);
  border-radius: 15px;
}
#page.viral section.what .row .des{
  max-width: 624px;
}
#page.viral section.what .row > div:nth-child(2n) .img{
  text-align: right;
}
#page.viral section.what .row .des h2{
  font-size: 40px;
  margin-bottom: 30px;
}
#page.viral section.what .row .des p{
  font-size: 22px;
  line-height: 1.7;
}
#page.viral section.what .row > div:nth-child(2n){
  flex-direction: row-reverse;
  justify-content: space-between;
}
@media screen and (max-width : 768px){
  #page.viral section.what{
    padding: 60px 0;
  }
  #page.viral section.what .row > div{
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding: 30px 0;
  }
  #page.viral section.what .row > div:nth-child(2n){
    flex-direction: column;
  }
  #page.viral section.what .row .des h2{
    font-size: 24px;
    margin-bottom: 10px;
  }
  #page.viral section.what .row .des p{
    font-size: 12px;
  }
}



/* ********************* marketing *********************** */
/* ********************* total *********************** */
/* ********************* what *********************** */
#page.total section.what{
  background-image: url('/images/service/total/what_bg.jpg');
  min-height: 800px;
}
#page.total section.what .title{
  padding: 222px 0;
  margin-left: 70px;
}
#page.total section.what .title h2{
  text-align: left;
  font-size: 58px;
  margin: 40px 0 30px 0;
}
#page.total section.what .title p{
  font-size: 25px;
}
#page.total section.what .contents > div{
  background-color: #ff7225;
  border-radius: 50%;
  box-shadow: 6.13px 5.13px 29px 1px rgba(0, 0, 0, 0.8);
  width: 195px;
  height: 195px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#page.total section.what .contents > div p{
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}
#page.total section.what .contents > div:first-child,
#page.total section.what .contents > div:nth-child(4),
#page.total section.what .contents > div:nth-child(5){
  background-color: #fff;
}
#page.total section.what .contents > div:first-child p,
#page.total section.what .contents > div:nth-child(4) p,
#page.total section.what .contents > div:nth-child(5) p{
  color: #111;
}
#page.total section.what{
  position: relative;
}
#page.total section.what .contents > div{
  position: absolute;
}
#page.total section.what .contents > div:first-child{
  top: 56px;
  right: 36%;
}
#page.total section.what .contents > div:nth-child(2){
  top: 56px;
  right: 21%;
}
#page.total section.what .contents > div:nth-child(3){
  top: 50%;
  transform: translateY(-50%);
  right: 43%;
}
#page.total section.what .contents > div:nth-child(4){
  top: 50%;
  transform: translateY(-50%);
  right: 14%;
}
#page.total section.what .contents > div:nth-child(5){
  bottom: 56px;
  right: 36%;
}
#page.total section.what .contents > div:nth-child(6){
  bottom: 56px;
  right: 21%;
}
@media screen and (min-width : 2560px){
  #page.total section.what .container{
    max-width: 1920px;
  }
}
@media screen and (max-width : 1490px){
  #page.total section.what .container{
    max-width: unset;
  }
  #page.total section.what .contents > div{
    width: 170px;
    height: 170px;
  }
  #page.total section.what .contents > div:first-child{
    top: 56px;
    right: 30%;
  }
  #page.total section.what .contents > div:nth-child(2){
    top: 56px;
    right: 15%;
  }
  #page.total section.what .contents > div:nth-child(3){
    top: 50%;
    transform: translateY(-50%);
    right: 38%;
  }
  #page.total section.what .contents > div:nth-child(4){
    top: 50%;
    transform: translateY(-50%);
    right: 8%;
  }
  #page.total section.what .contents > div:nth-child(5){
    bottom: 56px;
    right: 30%;
  }
  #page.total section.what .contents > div:nth-child(6){
    bottom: 56px;
    right: 15%;
  }
}
@media screen and (max-width : 1400px){
  #page.total section.what .title{
    margin-left: 10px;
  }
  #page.total section.what .contents > div:nth-child(2){
    top: 56px;
    right: 11%;
  }
  #page.total section.what .contents > div:nth-child(4){
    top: 50%;
    transform: translateY(-50%);
    right: 4%;
  }
  #page.total section.what .contents > div:nth-child(6){
    bottom: 56px;
    right: 11%;
  }
}
@media screen and (max-width : 1280px){
  #page.total section.what .title h2{
    font-size: 44px;
    margin: 30px 0 20px 0;
  }
  #page.total section.what .title p{
    font-size: 20px;
  }
  #page.total section.what .contents > div:nth-child(2){
    top: 56px;
    right: 9%;
  }
  #page.total section.what .contents > div:nth-child(4){
    top: 50%;
    transform: translateY(-50%);
    right: 2%;
  }
  #page.total section.what .contents > div:nth-child(6){
    bottom: 56px;
    right: 9%;
  }
}
@media screen and (max-width : 1024px){
  #page.total section.what .title{
    /* padding: 30px 0; */
  }
  #page.total section.what .contents > div:nth-child(2n+1){
    right: 26%;
  }
  #page.total section.what .contents > div:nth-child(2n){
    right: 5%;
  }
}
@media screen and (max-width : 768px){
  #page.total section.what{
    /* height: 100vh; */
    padding: 60px 0;
  }
  #page.total section.what .title{
    padding: 0;
    margin-bottom: 30px;
    margin-left: 0px;
    text-align: center;
  }
  #page.total section.what .gradient-box{
    margin: 0 auto;
  }
  #page.total section.what .title h2{
    font-size: 24px;
    margin: 20px 0 10px 0;
    text-align: center;
  }
  #page.total section.what .title p{
    font-size: 16px;
  }
  #page.total section.what .contents > div{
    position: unset;
    margin: 0 auto;
  }
  #page.total section.what .contents{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    margin: auto;
  }
  #page.total section.what .contents > div{
    width: 140px;
    height: 140px;
  }
  #page.total section.what .contents > div:nth-child(3){
    transform: translateY(0);
  }
  #page.total section.what .contents > div:nth-child(4){
    transform: translateY(0);
  }
  #page.total section.what .contents > div p{
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.2;
  }
  #page.total section.what .contents > div img{
    height: 50px;
  }
}
/* ********************* service *********************** */
#page.total section.service{
  background-color: #eee;
  padding: 105px 0 170px 0;
}
#page.total section.service .title h2{
  font-size: 60px;
}
#page.total section.service .title p{
  text-align: center;
  font-size: 32px;
}
#page.total section.service .contents{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1352px;
  margin: 0 auto;
  margin-top: 73px;
}
#page.total section.service .contents > div{
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}
#page.total section.service .contents h4,
#page.total section.service .contents p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  width: max-content;
}
#page.total section.service .contents h4{
  font-weight: 700;
  font-size: 32px;
  transition: opacity 0.3s ease;
}
#page.total section.service .contents p{
  font-size: 28px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#page.total section.service .contents > div:hover h4{
  opacity: 0;
}
#page.total section.service .contents > div:hover p{
  opacity: 1;
}
@media screen and (max-width : 768px){
  #page.total section.service{
    padding: 60px 0;
  }
  #page.total section.service .title h2{
    font-size: 24px;
  }
  #page.total section.service .title p{
    font-size: 16px;
  }
  #page.total section.service .contents{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
  }
  #page.total section.service .contents > div{
    border-radius: 15px;
  }
  #page.total section.service .contents h4{
    font-size: 16px;
  }
  #page.total section.service .contents p{
    font-size: 14px;
  }
}
/* ********************* adv *********************** */
#page.total section.adv{
  background-color: #ea5514;
  padding: 105px 0 210px 0;
}
#page.total section.adv .contents{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 95px;
}
#page.total section.adv .contents > div{
  flex: 1;
  min-width: 275px;
  min-height: 374px;
  border: 2px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 23px;
  text-align: center;
}
#page.total section.adv .contents .des h4{
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 30px 0 15px 0;
}
#page.total section.adv .contents .des p{
  color: #fff;
  font-size: 18px;
}
@media screen and (max-width : 768px){
  #page.total section.adv{
    padding: 60px 0;
  }
  #page.total section.adv .contents{
    gap: 20px;
    margin-top: 30px;
  }
  #page.total section.adv .contents > div{
    min-height: unset;
    padding: 10px;
    flex-direction: row;
    text-align: left;
    gap: 10px;
  }
  #page.total section.adv .contents > div > div:first-child{
    width: 24%;
    text-align: center;
  }
  #page.total section.adv .contents > div:nth-child(4) > div img{
    width: 30px;
  }
  #page.total section.adv .contents .des{
    /* width: 95%; */
    text-align: left;
  }
  #page.total section.adv .contents .des h4{
    font-size: 18px;
    margin: 0px 0 2px 0;
  }
  #page.total section.adv .contents .des p{
    font-size: 12px;
  }
}
/* ********************* suggest *********************** */
#page.total section.suggest{
  padding-top: 105px;
}
#page.total section.suggest .title h2 span{
  font-size: 55px;
}
#page.total section.suggest .content{
  background-image: url('/images/service/total/suggest_bg.jpg');
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 86px;
}
#page.total section.suggest .content > div{
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid #aaa;
  text-align: center;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.3s ease;
}
#page.total section.suggest .content h4,
#page.total section.suggest .content p{
  color: #fff;
  transition: letter-spacing 0.3s ease;
}
#page.total section.suggest .content h4{
  font-size: 20px;
  margin-bottom: 30px;
}
#page.total section.suggest .content p{
  font-size: 22px;
}
#page.total section.suggest .content > div:hover,
#page.total section.suggest .content > div.active{
  background-color: rgba(0, 0, 0, 0.3);
}
#page.total section.suggest .content > div:hover h4,
#page.total section.suggest .content > div:hover p,
#page.total section.suggest .content > div.active h4,
#page.total section.suggest .content > div.active p{
  letter-spacing: 0.7px;
}
@media screen and (max-width : 768px){
  #page.total section.suggest{
    padding-top: 60px;
  }
  #page.total section.suggest .title h2 span{
    font-size: 24px;
  }
  #page.total section.suggest .content{
    grid-template-columns: repeat(1, 1fr);
    margin-top: 30px;
  }
  #page.total section.suggest .content > div{
    height: 120px;
    padding: 0 5px;
  }
  #page.total section.suggest .content h4{
    font-size: 16px;
    margin-bottom: 10px;
  }
  #page.total section.suggest .content p{
    font-size: 12px;
  }
}