@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Manrope:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');



@font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }

/* Global */
:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;
  --color-pink: #fe918d;
  --color-dark-pink: #ff6863;
  --color-black: #4d4d4d;
  --color-dark-grey: #4d4d4d;
  --color-grey: #616161;
  --color-light-grey: #7c7979;
  --color-blue: #73aace;
  --color-yellow: #f284a9;
  --color-orange: #ffe400;
  --color-black: #000000;
  --color-title: #006fce;

  /* Font size */
  --font-big: 48px;
  --font-large: 48px;
  --font-semi:30px; 
  --font-medium: 24px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;
  --font-ani: 130px;
  --font-svg: 328px;

  /* Font family */
  --family-bold: "GmarketSansBold";
  --family-regular: "GmarketSansMedium";
  --family-ka: "GmarketSansLight";

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 500;
  --weight-regular: 300;

  /* Size */
  --size-border-radius: 4px;

  /* Annimation */
  --animation-duration: 300ms;

  /*ligh height*/
  --lign-height-medium:135%;
  --lign-height-large:145%;
}


/* Universal tags */
* {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
}

button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--color-white);
}

ul {
  padding-left: 0;
}

b,strong{font-weight: normal;}
li {
  list-style: none;
}

.inner{width: 100%; max-width: 1400px; margin: 0 auto;}

button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
}

/* Typography */
h1 {
  font-size: var(--font-big);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  font-family: var(--family-bold);
  line-height:var(--lign-height-medium);
}

h2 {
  font-size: var(--font-medium);
  font-weight: var(--weight-semi-bold);
  color: var(--color-black);
  margin: 0;
  font-family: var(--family-bold);
}

h3 {
  font-size: var(--font-regular);
  color: var(--color-black);
  margin: 8px 0;
  font-family: var(--family-regular);
}

p {
  font-size: var(--font-regular);
  color: var(--color-black);
  margin: 0;
}

h1 span{
  color: var(--color-orange);
}


/* Navbar */
#navbar {
  position: fixed;
  width: 100%;
  padding: 16px;
  background-color: transparent;
  transition: all var(--animation-duration) ease-in-out;
  z-index: 1;
}

#navbar .inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#navbar.navbar--dark {
  background-color: var(--color-title);
  padding: 8px;
  z-index: 1000;
}

.navbar__logo {
  font-size: var(--font-medium);
  font-weight: var(--weight-semi-bold);
  color: white;
}

.navbar__menu {
  display: flex;
}

.navbar__menu__item {
  padding: 8px 12px 4px 12px;
  margin: 0 4px;
  color: var(--color-white);
  cursor: pointer;
  border-radius: var(--size-border-radius);
  font-size: 21px;
  font-family: var(--family-regular);
  border: 1px solid rgba(255, 0, 0, 0);
  font-weight: normal ;
}

.navbar__menu__item.active {
  border: 1px solid white;
}

.navbar__menu__item:hover {
  border: 1px solid white;
  border-radius: var(--size-border-radius);
}

.navbar__toggle-btn {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 24px;
  color: var(--color-white);
  display: none;
}

/* Home */
#home {
  background: url(./imgs/home/vis_bg.png) no-repeat center;
  height: 972px;
  position: relative;
  overflow: hidden;
}
.home__container {
  position: relative;
  height: 972px;
  width: 1400px;
  margin: 0 auto;
  vertical-align: middle;
}

.home__container h1{margin-top: 268px; text-shadow: 2px 2px 5px #0000008c; margin-bottom: 30px;}
.home__container p{font-size: 24px; color: #fff; line-height: 135%; text-shadow: 2px 2px 5px #0000008c; font-family: var(--family-regular); line-height: var(--lign-height-large);}
.home__container p{
  /*
  animation: fadeupSy 1s;
  animation-duration: 2s; 
  animation-delay: 6s;
  animation-fill-mode: forwards;*/
  opacity: 1;
}
@keyframes fadeupSy {
  0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
  }
  to {
      opacity: 1;
      transform: translateZ(0);
  }
}
.home__contact {
  color: var(--color-white);
  font-size: var(--font-medium);
  font-family: var(--family-regular);
  border: 2px solid var(--color-white);
  border-radius: 71px;
  width: 270px;
  height: 71px;
  line-height: 71px;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
  background: none;
}

.home__contact .wave{
  position: absolute;
  top: 437px;
  left: 0;
  width: 100%;
  height: 250px;

  transition: .5s ease;
}

.home__contact:hover .wave::after,
.home__contact:hover .wave::before{
  top: -100px;
  transition: 2s ease;
}

.z_indexx{z-index: 9; position: relative;}

.home__contact .wave::after,
.home__contact .wave::before{
  content:'';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -10px;
  left: 50%;
  transform:translate(-50%, -75%);
  transition: .5s ease;
}

.home__contact .wave::before{
  border-radius: 40%;
  background: rgba(1,1,1,.5);
  animation: wave 7s linear infinite;
}

.home__contact .wave::after{
  border-radius: 45%;
  background: linear-gradient(45deg, #e89211, #ee060a);
  animation: wave 12s linear infinite;
}

@keyframes wave {
  0%{
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -75%) rotate(360deg);
  }
}











/* Section common */
.section {
  padding: 50px;
  text-align: center;
  margin: auto;
}

.section__container {
  max-width: 1200px;
  margin: auto;
}

/* About */

#about {
  position: relative;
  overflow: hidden;
}

#about .section__container{position: relative; width: 100%; max-width: 1400px;}

.about_anibox{height: auto; height: 520px; margin-top: 200px; position: relative;} 
.about_anibox span{font-size: var(--font-ani); font-family: 'Manrope', sans-serif; font-weight: 500;}
.about_anibox span.weare{position: absolute; top: 24px; left: 270px;}
.about_anibox span.digital{position: absolute; top: 172px; left: 196px;}

.about_anibox span.company{position: absolute; top: 297px; left: 442px;}
.about_anibox span.line_ani{position: absolute; top: 380px; left: 415px;}

.about_us{text-align: right; margin-top: 200px;}
.about_us > b{font-size: 30px; font-family: var(--family-regular); position: relative; display: inline-block;}
.about_us > b::before{position: absolute; left: 0; top: 20px; margin-left: -100px; width: 71px; height: 5px; background-color: #000000; content: "";}
.about_us h2{font-size: var(--font-large); font-family: var(--family-regular);}
.about_us h2 span{font-family: var(--family-bold); color: #0095da;}
.about_us h2 b{font-family: var(--family-bold); color: #fca304;}

.about_us ul{text-align: right; display: inline-block; margin-top: 50px;}
.about_us ul li{font-size: var(--font-semi); text-align: left; font-family: var(--family-regular); margin-bottom: 10px;}
.about_us ul li span{display: inline-block; width: 325px;}
.about_us ul li p{display: inline-block; font-size: var(--font-semi);}

.bol_control{position: absolute; width: 767px; height: 886px; right: 0; top: 100px; background: url(./imgs/bol_op1.png) no-repeat center; margin-top: -100px; z-index: -1;}
.bol_control2{position: absolute; width: 603px; height: 683px; left: 0; top: 500px; background: url(./imgs/bol_op2.png) no-repeat center; z-index: -1;}


/*skill*/
#skills{height: auto; width: 100%; position: relative; padding: 0;}
#skills img{width: 100%;}
.text_hon{font-size: 100px; color: #04a2ec; font-family: 'NanumBarunGothic'; font-weight: 700; position: absolute; right: 0; bottom: 0; margin-bottom: -50px;}
.text_hon::before{position: absolute; left: 56%; top: 0; width: 190px; height: 200px; background: url(./imgs/and_img.png) no-repeat center; content: ""; margin-top: -30px;  margin-bottom: -50px;} 


/*value*/
#value{text-align: left; margin-top: 100px;}
#value .section__container{position: relative; width: 100%; max-width: 1400px; height: 100%;}
#value h2{font-size: 50px; font-family: 'Pretendard'; font-weight: 900; margin-bottom: 40px; position: relative;}
#value h2::after{position: absolute; content: "Value"; font-size: 190px; font-family: 'Pretendard'; left: 0; top: 0; margin-top: -147px; margin-left: -159px; color: #e5e5e5; z-index: -1; font-weight: 900;}
#value p{font-size: 24px; font-family: 'Pretendard-Regular'; line-height: var(--lign-height-large); margin-bottom: 8px;}


/*professiional*/
#professiional{text-align: right; margin-top: 100px; background-color: #323232; height: 895px; position: relative;}
#professiional .section__container{position: relative; width: 100%; max-width: 1400px; height: 100%;}
#professiional .text_profe{position: absolute; bottom: 160px; right: 0; z-index: 1;}
#professiional h2{font-size: 50px; font-family: 'Pretendard'; font-weight: 900; margin-bottom: 40px; position: relative; color: var(--color-white)}
#professiional h2::after{position: absolute; content: "Professional"; font-size: 190px; font-family: 'Pretendard'; right: 0; top: 0; margin-top: -147px; margin-right: -159px; color: #535353; z-index: -1; font-weight: 900;}
#professiional p{font-size: 24px; font-family: 'Pretendard-Regular'; line-height: 165%; margin-bottom: 8px; color: var(--color-white)}

.proimg_box{text-align: right; margin-bottom: -426px; z-index: 2; position: relative; margin-top: 100px;}
.arrow_point{position: absolute; left: 0; bottom: 0; width: 529px; height: 617px; /*background: url(./imgs/arrow_ani.png) no-repeat center;*/ margin-bottom: -436px;}

/*resoect*/
#resoect{text-align: right; margin-top: 100px; padding-bottom: 0;}
#resoect .section__container{position: relative; width: 100%; max-width: 1400px; height: 100%;}
#resoect h2{font-size: 50px; font-family: 'Pretendard'; font-weight: 900; margin-bottom: 40px; position: relative; color: var(--color-black)}
#resoect h2::after{position: absolute; content: "Respect"; font-size: 190px; font-family: 'Pretendard'; right: 0; top: 0; margin-top: -147px; margin-right: -159px; color: #efefef; z-index: -1; font-weight: 900;}
#resoect p{font-size: 24px; font-family: 'Pretendard-Regular'; line-height: 165%; margin-bottom: 8px; color: var(--color-black)}
#resoect span{font-size: 72px; font-family: var(--family-regular); text-align: left; display: block; margin-top: 100px; position: relative;}
#resoect span::before{position: absolute; content: ""; background: url(./imgs/conma.png) no-repeat center; width: 154px; height: 121px; top: 0; margin-top: -65px; left: 0; margin-left: -70px;}

/*bussiness*/
#bussiness{padding: 0; position: relative; height: 972px;}
.bussiness_slide{position: absolute; top: 0; left: 0;  width: 100%; height: 972px;}
.bussiness_slide .bg1{background: url(./imgs/big_bg_slide1.png) no-repeat center; height: 972px; width: 100%;}
.bussiness_slide .bg1.bg2{background: url(./imgs/big_bg_slide2.png) no-repeat center; height: 972px; width: 100%;}
.bussiness_slide .bg1.bg3{background: url(./imgs/big_bg_slide3.png) no-repeat center; height: 972px; width: 100%;}
.bussiness_slide .bg1.bg4{background: url(./imgs/big_bg_slide4.png) no-repeat center; height: 972px; width: 100%;}

.bussiness_inner{width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden;}
.tt_imgbox_slide{ float: right; position: relative; padding-top: 203px; width: 560px; }


.bussiness_slide .bg1{text-align: left; overflow: hidden;}
.bussiness_slide .bg1 .tit{max-width: 1200px; margin: 0 auto; width: 100%; padding-top: 203px;}
.bussiness_slide .bg1 b{font-size: 39px; color: #fff; font-family: var(--family-regular); margin-bottom: 30px; display: block;}
.bussiness_slide .bg1 b small{font-size: 18px; color: #fff; opacity: 0.6;}
.bussiness_slide .bg1 h2{font-size: 60px; color: #fff; font-family: var(--family-regular); margin-bottom: 35px; line-height: 125%; text-shadow: 2px 2px 4px #000; transform: translateY(50px); transition: all 1s;}
.bussiness_slide .bg1 p{font-size: 20px; color: #fff; margin-bottom: 5px; font-family: var(--family-regular); transform: translateY(20px); transition: all 1s;}
.bussiness_slide .bg1 a{color: #fff; font-size: 19px; width: 185px; height: 60px; line-height: 60px; border:1px solid #fff; display: block; text-align: center; margin-top: 50px;}
.tt_imgbox_slide{z-index: 99;}
.sub_slide{position:absolute; top: 50%; right:150px; background: #d42228 no-repeat center; width: 180px; height: 461px; transform: translateY(-50%); color: #fff; text-align: left; cursor: pointer; transition: all 1s;}
.sub_slide:hover{background-color: #ff6600; transition: all 0.5s; border-top-right-radius: 50px;}
#bussiness .prev-arrow:hover{background-color: #ff6600; transition: all 0.5s;}

.sub_slide .next{position: relative; height: 461px;}
.bottom_tt{position: absolute; bottom: 30px; left: 20px;}
.arrow_bom{position: absolute; content: ""; background: url(./imgs/arrow_btn_sub.png) no-repeat center; width: 16px; height: 30px; bottom: 36px; right: 24px;}

.sub_slide .next span{font-size: 26px; color: #fff; padding-top: 25px; margin-left: 25px; display: block; box-sizing: border-box;}
.sub_slide .next h2{font-size: 24px; color: #fff; font-family: var(--family-regular);}
.sub_slide .next p{font-size: 12px; color: #fff;}

#bussiness .slick-slide img{display: inline-block !important; text-align: right;}
#bussiness .slick-dots{display:none!important}
#bussiness.slick-initialized{visibility:visible;opacity:1}
#bussiness .slick-slide {outline:none}

/*slick btn control*/
#bussiness .slide-arrow{position:absolute; top: 50%; padding: 10px 4px;font-size: 24px;color: #000; background: rgba(255,255,255,0.8);border:none;outline:0;z-index:1;cursor:pointer;}
#bussiness .prev-arrow{left: 150px; background: #d42228 url(./imgs/sli_arrow_prev.png) no-repeat center; width: 82px; height: 82px; transform: translateY(-50%); text-align: center; transition: all 0.5s;}
#bussiness .prev-arrow::before{opacity: 0; display: none;}

#bussiness .next-arrow{right: 110px; background: none; width: 180px; height: 461px; transform: translateY(-50%); text-align: center; display: none;}
#bussiness .next-arrow::before{opacity: 0; display: none;}
.main_slider .slick-current .tit h2{transform: translateY(0); transition: all 1s;}
.main_slider .slick-current .tit p{transform: translateY(0); transition: all 1s;}


/*advantage*/
#advantage{padding: 0;}
#advantage .section__container{width: 100%; max-width: 1400px; margin: 0 auto; font-size: 0; background: url(./imgs/map_bg.png) no-repeat center bottom;}
.years_text,.years_img{display: inline-block; vertical-align: middle; text-align: left; width: 50%;}

.years_text li{border-bottom: 1px solid #ddd; position: relative; box-sizing: border-box; padding: 20px 40px; max-width: 635px;}
.years_text li:last-of-type{border: 0;}
.years_text li::after{color:#bbb5b7; font-size: 15px; position: absolute; top: 25px; left: 0; font-family: var(--family-regular);}
.years_text li:nth-of-type(1)::after{content: "01";}
.years_text li:nth-of-type(2)::after{content: "02";}
.years_text li:nth-of-type(3)::after{content: "03";}
.years_text li:nth-of-type(4)::after{content: "04";}
.years_text li:nth-of-type(5)::after{content: "05";}

.years_text span{font-size: 30px; color: #0a31a8; font-family: var(--family-bold);margin-bottom: 18px; display: block;}
.years_text p{font-size: 18px; color: #1e1526; font-family: var(--family-regular); margin-bottom: 7px;}
.years_text p.red_point{color: #d42228; font-family: var(--family-regular);}

#advantage .section__container > span{font-size: 72px; font-family: var(--family-regular); display: block; margin-top: 65px; position: relative; text-align: right;}
#advantage .section__container > span::before{position: absolute; content: ""; background: url(./imgs/conma2.png) no-repeat center; width: 154px; height: 121px; top: 0; margin-top: -65px; right: 0; margin-right: -70px;}

.cercle_all{text-align: center; position: relative; height: 430px;}
.cercle_all{margin-bottom: 50px;}

.cercle_han1{width: 430px; height: 430px; border-radius: 100%; opacity: 0.24; background-color: #bfc3d4; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);}
.cercle_han2{width: 385px; height: 385px; border-radius: 100%; opacity: 0.34; background-color: #97a8c8; position: absolute; top: 50%; left:50%; transform: translateY(-50%) translateX(-50%);}
.cercle_han3{width: 338px; height: 338px; border-radius: 100%; background: rgb(7,129,156); top: 50%; background: linear-gradient(0deg, rgba(7,129,156,1) 0%, rgba(108,100,169,1) 100%); position: absolute; left:50%; transform: translateY(-50%) translateX(-50%); display: flex; justify-content: center; align-items: center;}
.cercle_han3 h3{font-size: 30px; color: #fff; font-family: var(--family-bold); margin-top: 15px;}

.textarea_box{background: rgba(218,222,230,0.61); box-sizing: border-box; padding: 30px 40px;}
.textarea_box p{margin-bottom: 30px; font-family: var(--family-regular);}
.textarea_box p:last-of-type{margin-bottom:0;}

/* Work */

#work{position: relative; overflow: hidden;}
.work_text_ani{margin-top: 20px; margin-bottom: 150px;}
.work_text_ani span{font-size: 310px; color: #000; font-family: 'Alex Brush', cursive; position: relative;}
.work_text_ani span:after{font-size: 76px; color: #000; letter-spacing: -3px; font-weight: 600; position: absolute; right: 0; bottom: 30px; content: "Port folio"; font-family: "Montserrat", sans-serif;}

.work_inner{max-width: 1275px; width: 100%; font-size: 0; margin: 0 auto; margin-top: 50px; margin-bottom: 100px;}
.work_inner li{display: inline-block; width: calc(100%/3); background-color: #ddd; height: 433px; position: relative;}
.work_inner li.work1{background: url(./imgs/works/work1.png) no-repeat center;}
.work_inner li.work2{background: url(./imgs/works/work2.png) no-repeat center;}
.work_inner li.work3{background: url(./imgs/works/work3.png) no-repeat center;}
.work_inner li.work4{background: url(./imgs/works/work4.png) no-repeat center;}
.work_inner li.work5{background: url(./imgs/works/work5.png) no-repeat center;}
.work_inner li.work6{background: url(./imgs/works/work6.png) no-repeat center;}
.work_inner li.work7{background: url(./imgs/works/work7.png) no-repeat center;}
.work_inner li.work8{background: url(./imgs/works/work8.png) no-repeat center;}
.work_inner li.work9{background: url(./imgs/works/work9.png) no-repeat center;}
.work_inner li.work10{background: url(./imgs/works/work10.png) no-repeat center;}
.work_inner li.work11{background: url(./imgs/works/work11.png) no-repeat center;}
.work_inner li.work12{background: url(./imgs/works/work12.png) no-repeat center;}

.work_inner li.work13{background: url(./imgs/new_port1.png) no-repeat center;}
.work_inner li.work14{background: url(./imgs/new_port2.png) no-repeat center;}
.work_inner li.work15{background: url(./imgs/new_port3.png) no-repeat center;}
.work_inner li.work16{background: url(./imgs/new_port6.png) no-repeat center;}
.work_inner li.work17{background: url(./imgs/new_port4.png) no-repeat center;}
.work_inner li.work18{background: url(./imgs/new_port5.png) no-repeat center;}
.work_inner li.work19{background: url(./imgs/work5.png) no-repeat center;}
.work_inner li.work20{background: url(./imgs/work5.png) no-repeat center;}


.work_inner li.work21{background: url(./imgs/new_port7.png) no-repeat center;}
.work_inner li.work22{background: url(./imgs/new_port8.png) no-repeat center;}
.work_inner li.work23{background: url(./imgs/new_port9.png) no-repeat center;}
.work_inner li.work24{background: url(./imgs/new_port10.png) no-repeat center;}




.text_abs{position: absolute; left: 30px; bottom: 30px; text-align: left;}

.work_inner li a{display: block; width: 100%; height: 100%;}
.text_abs p:first-of-type{font-size: 31px; color: #fff; font-family: var(--family-bold); text-shadow: 2px 2px 2px #000;}
.text_abs p:last-of-type{font-size: 14px; color: #fff; font-weight: 500; text-shadow: 2px 2px 2px #000;}


/* Testimonial */

#testimonials{background: #354b7d; height: 972px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; overflow: hidden;}
#testimonials .section__container{max-width: 1400px; width: 100%; margin: 0 auto;}
#testimonials .section__container h2{font-size: 36px; color: #fff; margin-bottom: 30px;}
#testimonials .section__container h2 br{display: none;}

.testimonial{background: url(./imgs/bg_co.png); box-shadow: 2px 2px 5px #213460; }
.testimonial ul{font-size: 0;}
.testimonial ul li{display: inline-block; text-align: center; width: calc(100%/5); box-sizing: border-box; padding: 20px;}

.t_point1{background: url(./imgs/mon_yang1.png) no-repeat center; width: 515px; height: 493px; position: absolute; right: 0; top: 0; z-index: -1;}
.t_point2{background: url(./imgs/mon_yang2.png) no-repeat center; width: 1195px; height: 744px; position: absolute; left: 0; bottom: 0; z-index: -1; margin-bottom: -300px; margin-left: -200px;}


/* Contact */

#contact{position: relative; overflow: hidden;}
#contact .work_text_ani span::after{display: none;}
#contact .section__container{width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden;}
.work_text_ani h3{font-size: 36px; letter-spacing: -1px; font-weight: 500; margin-top: -100px;}
.work_text_ani p{font-size: 30px; font-family: var(--family-regular);}

/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
}

.gr1{float: left;}
.gr2{float: right;}
.gr3{ border: 3px solid #000; height: 275px; width: 100%;}
.text_jone{float: left; width: 100%; position: relative; text-align: left; margin-top: 30px;}
#contact .text_jone label{left: 10px; top: 10px;}

#contact textarea:focus 		{ outline:none; }
#contact textarea:focus{border: 3px solid #006fce;}

#contact textarea{font-size: 20px; font-family: var(--family-regular); background: none; box-sizing: border-box; padding: 10px;}

#contact .group input 				{
  font-size:20px;
  padding:10px 10px 20px 5px;
  display:block;
  width:580px;
  border:none;
  border-bottom:3px solid #000;
  font-family: var(--family-regular);
  background: none;
}
#contact input:focus 		{ outline:none; }

/* LABEL ======================================= */
#contact .group label 				 {
  color:#000; 
  font-size:30px;
  font-family: var(--family-regular);
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

#contact .text_jone label 				 {
  color:#000; 
  font-size:30px;
  font-family: var(--family-regular);
  position:absolute;
  pointer-events:none;
  left:15px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
#contact input:focus ~ label, #contact input:valid ~ label 		{
  top:-20px;
  font-size:16px;
  color:#0036ff;
}

#contact textarea:focus ~ label, #contact textarea:valid ~ label 		{
  top:-25px;
  left: 0;
  font-size:18px;
  color:#0036ff;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:3px; 
  width:0;
  bottom:0px; 
  position:absolute;
  background:#006fce; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
#contact input:focus ~ .bar:before, #contact input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
#contact input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#006fce; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#006fce; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#006fce; }
  to 	{ width:0; background:transparent; }
}


/*contact*/
#contact .container{clear: both;}

.container {
  text-align: center;
  width: auto;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20px;
  color: #000;
  font-family: var(--family-regular);
}
.list-item {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.item {
  display: inline-block;
  position: relative;
  color: #666;
}
.item:before {
  content: '';
  height: 10%;
  width: 0%;
  bottom: 0;
  position: absolute;
  background: #333;
  transition: all 150ms ease-in-out;
}
.custom-check {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 5px;
  background: #9bcefc;
  border: 1px solid #006fce;
  margin-right: 10px;
  position: relative;
  transition: all 100ms ease-in-out;
}
.custom-check .rect-1, .custom-check .rect-2 {
  width: 0%;
  height: 20%;
  background: white;
  transform-origin: left center;
  transform: rotate(45deg);
  position: absolute;
  top: 31%;
  left: 15%;
  transition: all 150ms ease-in;
}
.custom-check .rect-2 {
  transform: rotate(-45deg) translate(38%, 38%);
  top: 75%;
  left: 7%;
  transition: all 150ms ease-in 150ms;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked ~ .custom-check {
  background: #006fce;
}
input[type="checkbox"]:checked ~ .custom-check .rect-1, input[type="checkbox"]:checked ~ .custom-check .rect-2 {
  width: 30%;
}
input[type="checkbox"]:checked ~ .custom-check .rect-2 {
  width: 70%;
}
input[type="checkbox"]:checked ~ .item {
  color: #333;
}
input[type="checkbox"]:checked ~ .item:before {
  width: 100%;
}

.contect_send{width: 317px; height: 81px; line-height: 81px; text-align: center; color: #000; border-radius: 81px; border: 3px solid #000; font-size: 30px; font-family: var(--family-regular); margin-top: 50px;}


/*오시는길*/
.content_wrap{width: 100%; max-width: 1400px; margin: 0 auto;}

#mapmini{display: none;}
.map_area{position:relative; z-index:1}
.map_area .txt{position:absolute;bottom:-90px;left:50%;transform:translateX(-50%);max-width:1400px;z-index:100; width: 100%;}
.map_area .txt .txt_wrap {background-color:#006fce;box-shadow:3px 3px 3px rgba(0,0,0,0.2);padding:45px 0;}
.map_area .txt .logo{position:absolute; top:34px; left:0; border-right:1px solid #1a7dd3; text-align:center; width:315px; line-height:90px; height:90px;}
.map_area .txt .contact{display:block; color:#fff; font-weight:500; font-size:20px; letter-spacing:-1px; line-height:1.6; padding:0 0 0 405px;}
.map_area .txt .tx .tel{font-weight:300;}
.map_area .txt .bt{position:absolute;top:50%;right:40px;margin-top:-35px;display:block;border-radius:65px;border:3px solid #fff;color:#fff;font-size:20px;text-align:center;min-width:220px;line-height:60px;height:65px;}

.contact_address {width:100%;height:auto; line-height:1.7;}
.contact_address ul {max-width:1240px;clear: both;padding:0 20px 20px 0px;border-bottom:1px solid #ddd;}
.contact_address ul li {color: #555;margin-top: 5px;margin-bottom: 5px; font-size:16px}
.contact_traffic { max-width:1240px; margin:100px auto; padding:20px; letter-spacing:-0.8px; margin-bottom: 0; clear:both; }

.contact_traffic ul {border-bottom:1px solid #ddd; padding-bottom:25px}
.contact_traffic .bus {width:100%;}
.contact_traffic .subway {width:100%}
.contact_traffic ul li {color: #555; line-height:33px; font-size:16px; vertical-align: middle; margin-top: 10px;}
.contact_traffic h3 { font-size:20px; font-weight:400; letter-spacing:-1px; color:#1a1a1a; padding-bottom:10px; margin-top:25px; text-align:left}
.overlaybox {position:relative;width:360px;height:350px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/box_movie.png') no-repeat;padding:9px 10px 15px 10px;  font-family: 'Pretendard-Regular';}
.overlaybox div, ul {overflow:hidden;margin:0;padding:0;}
.overlaybox li {list-style: none;}
.overlaybox .boxtitle {color:#fff;font-size:16px;font-weight:bold;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png') no-repeat right 95px center;margin-bottom:8px;}
.overlaybox .first {position:relative;width:247px;height:136px;background: url('./imgs/bgmap_kakao.png') no-repeat center; margin-bottom:8px; background-size: cover;}
.first .text {color:#fff;}
.first .triangle {position:absolute;width:68px;height:68px;top:0;right:0;background: url("./imgs/nono.png") no-repeat; padding:6px;font-size:18px; text-align: right;}
.first .movietitle {position:absolute;width:100%;bottom:0;background:rgba(0,0,0,0.4);padding:7px 15px;}
.overlaybox ul {width:247px;}
.overlaybox li {position:relative;margin-bottom:2px;background:#2b2d36;padding:5px 10px;color:#aaabaf;line-height: 1;}
.overlaybox li a{color:#aaabaf; line-height: 1; display: block; font-family: 'GmarketSansMedium'; letter-spacing: -1px;}
.overlaybox li:hover a{color: #fff;}
.overlaybox li span {display:inline-block;}
.overlaybox li .number {font-size:14px;}
.overlaybox li .title {font-size:14px; max-width: 180px; width: 100%;}
.overlaybox ul .arrow {position:absolute;margin-top:8px;right:35px;width:5px;height:3px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/updown.png') no-repeat;} 
.overlaybox li .up {background-position:0 -40px;}
.overlaybox li .down {background-position:0 -60px;}
.overlaybox li .count {position:absolute;margin-top:5px;right:15px;font-size:10px;}
.overlaybox li:hover {color:#fff;background:#d24545;}
.overlaybox li:hover .up {background-position:0 0px;}
.overlaybox li:hover .down {background-position:0 -20px;}   
.text{font-family: 'GmarketSansMedium'; letter-spacing: 0; font-size: 16px;}
.map-btns{z-index: 190; position: absolute; right: 5px; top: 5px;}
.map-btns button{font-size: 14px; display: block; background-color: tomato; padding: 10px; border: 0; font-family: 'GmarketSansMedium'; border-radius: 5px; color: #000; margin-bottom: 10px;}
.map-btns button.blus_gg{background-color: #00a0e9;}

.txt_wrap p{color: #fff; font-family: var(--family-regular); font-size: 20px; text-align: left;}
.txt_wrap a{color: #fff; font-family: var(--family-regular); font-size: 20px;}
.contact_traffic{text-align: left; font-family: var(--family-regular); font-size: 20px;}

.boxtitle a{display: block; width: 100%; font-family: 'GmarketSansMedium'; font-weight: normal;}
#mapcontrol{text-align: left;}



/*푸터*/
#footer{ width:100%; height:auto; background:#30343b; clear:both; font-family: var(--family-regular);}
#footer .inner{overflow: hidden; max-width: 1375px;}
.foot_menu{width:100%; padding:20px 0px; background:#30343b; border-bottom:1px solid rgba(255,255,255,0.07);  }
.foot_menu .fm{ float:left;}
.foot_menu .fm li{ display:inline-block; margin-right:12px; padding-right:12px; border-right:1px solid rgba(255,255,255,0.07);}
.foot_menu .fm li:first-of-type{padding-left: 12px;}
.foot_menu .fm li a{ font-size:0.8em; color:rgba(255,255,255,0.9);}
.foot_menu .fm li a.point{color:#32c0eb;}
.foot_menu .fm li:last-child{border-right:0;}
.foot_menu .sns{  float:right;}
.foot_menu .sns li{ display:inline-block; margin-left:10px; }
.foot_menu .sns li:first-child {margin-left:0;}
.foot_menu .sns li a { color:#777}
.foot_menu .sns li a:hover { color:#fff}
.foot_menu .menu { margin-top:20px; }
.foot_menu #phone { display:inline-block; color:#fff; font-size:12px; text-align:center; padding: 0px 20px; background-color:#6C6}
.foot_menu #kakao{ display:inline-block; color:#000; font-size:12px; text-align:center; padding: 0px 20px; background-color:#ffeb33}

.footer_in{ max-width:1400px; height:auto; padding:15px 10px; margin:0 auto; box-sizing:border-box; overflow: hidden;}
.footer_in address h1{ font-size:16px; padding-bottom:10px; color:#fff; font-weight:bold; line-height: normal; padding: 0; margin: 0; margin-bottom: 5px;}
.footer_in address p{ overflow:hidden; font-size:13px; color:rgba(255,255,255,0.4);}
.footer_in address p strong{ font-weight: 500;  color:rgba(255,255,255,0.5);}
.footer_in address p span{display:inline-block;margin-right:10px; line-height:1.8em;}
.footer_in address p.addr{margin-top:18px;}
.footer_in address p.copylight{ font-size:13px; color:#999; margin-top:18px;}
.footer_in address{float:left; width:65%; font-style:normal}
.footer_in .customer{float:right; color:rgba(255,255,255,0.5); margin-left:20px; padding-left:30px; border-left:1px solid rgba(255,255,255,0.05); font-size:13px; margin-top: 25px;}
.footer_in .customer .main_tel{font-size:18px; font-weight:300; color:#fff; margin-bottom:20px; margin-top:20px;}
.footer_in .customer .main_tel span{font-size:20px; font-weight:bold; color:#32c0eb; display:block; margin-top:10px;}
.sns{display: none;}

/*Scroll*/
.arrow-up {
  position: fixed;
  bottom: 50px;
  right: 50px;
  font-size: 50px;
  color: var(--color-white);
  background-color: var(--color-pink);
  border-radius: 50%;
  opacity: 0;
  transition: all 300ms ease-in;
  pointer-events: none;
}

.arrow-up.visible {
  opacity: 1;
  pointer-events: auto;
}



.path{display: inline-block; width: 100px;}

.about_anibox .artist{
  position: absolute; top: 45px; left: 610px; 
  font-family: "Vladimir Script"; 
  font-size: var(--font-svg); 
  max-width: 800px; 
  width: 100%; 
  height: 300px;}
.about_anibox .artist svg{width: 100%; height: auto; display: block;}

.about_anibox span.line_ani{display: block;
  max-width: 980px; 
  width: 100%; 
  height: 300px;
}
.line_ani svg{width: 100%; height: auto; display: block;}


.arrow_point svg{width: 100%; height: auto; display: block;}

.work_text_ani span svg{width: 100%; height: 100%; display: block;}

.work_text_ani span{
  max-width: 1000px;
    width: 100%;
    height: 365px;
  display: inline-block;
}
.work_text_ani{margin-bottom: 50px;}
.arrow_point{
  max-width: 500px; 
  width: 100%; 
  height: 800px;
}


.proimg_box .div_bl_box{position: relative; height: 100%;
  display: inline-block;}
.proimg_box .circle{position: absolute; left: 0; top: 0; background: #000; content: ''; width: 100%; height: 100%; clip-path: ellipse(150% 150% at 100% 100%); z-index: 2;}

#sever_boan{position: relative;}
#sever_boan .circle{position: absolute; left: 0; top: 0; background: #000; content: ''; width: 100%; height: 100%; clip-path: ellipse(150% 150% at 100% 100%); z-index: 10;}





.proimg_box img{position: relative; z-index: 1;}





@media screen and (max-width: 1730px) {
  /*value*/
  #value h2::after{margin-left: 0;}
  #professiional h2::after{margin-right: 0;}
  #professiional{margin-top: -30px;}
  #professiional{height: 620px;}
  #resoect h2::after{margin-right: 0;}
  #advantage .section__container > span::before{margin-right: 0;}
}

@media screen and (max-width: 1690px) {
  /*bussiness*/
  .sub_slide{right: 30px;}
  #bussiness .prev-arrow{left: 30px;}
}

@media screen and (max-width: 1600px) {
  .proimg_box img{width: 100%;}
  .proimg_box {margin: 0;}
}

@media screen and (max-width: 1480px) {
  /*about*/
  :root{
    --font-ani: 100px;
    --font-svg: 255px;
  }
  .about_anibox{margin-top: 50px;}
  .about_anibox:after {
    content: "";
    display: block;
    padding-bottom: calc(670 / 1402 * 100%);
    position: relative;
  }
  #about .about_anibox span.weare{top: calc(0 / 670 * 100%); left: calc(240 / 1402 * 100%);}
  #about .about_anibox span.artist{top: calc(0 / 670 * 100%); left: calc(560 / 1402 * 100%);}
  #about .about_anibox span.digital{top: calc(150 / 670 * 100%); left: calc(140 / 1402 * 100%);}
  #about .about_anibox span.company{top: calc(320 / 670 * 100%); left: calc(442 / 1402 * 100%);}
  #about .about_anibox span.line_ani{top: calc(390 / 670 * 100%); left: calc(415 / 1402 * 100%);}
  .about_anibox .artist{top: 10px; left: 443px; max-width: 660px;}
  .about_anibox span.line_ani{max-width: 800px;}
  
  .line_ani > img{width: 500px;}

  /*bussiness_slide*/
  .bussiness_slide .bg1 b{font-size: 30px;}
  .bussiness_slide .bg1 h2{font-size: 42px;}
  .bussiness_slide .bg1 p{font-size: 16px;}
  .bussiness_slide .bg1 a{width: 160px; height: 55px; line-height: 55px; font-size: 18px;}
  .bussiness_slide .bg1 .tit{width: 1000px;}
  .tt_imgbox_slide {width: 470px; padding-top: 0; margin-top: 203px; height: 470px;}
  .bussiness_inner{max-width: 800px;}
}



@media screen and (max-width: 1400px) {
  /*about*/
  :root {
    --font-ani: 80px;
    --font-svg: 210px;
    --font-large: 32px;
    --font-semi: 18px;
  }
  .about_us > b{font-size: 25px;}
  .about_us{margin-top: 0;}

  .about_anibox span.line_ani{max-width: 630px;}

  /*skill*/
  .text_hon {font-size: 70px;}

  /*value*/
  #value h2{font-size: 35px;}
  #value p{font-size: 18px; margin-bottom: 3px;}
  #value h2::after{font-size: 130px; bottom: 0; top: auto; margin-top: 0;}

  /*professiional*/
  #professiional h2{font-size: 35px;}
  #professiional p{font-size: 18px; margin-bottom: 3px;}
  #professiional h2::after{font-size: 130px; bottom: 0; top: auto; margin-top: 0;}

  /*resoect*/
  #resoect h2{font-size: 35px;}
  #resoect p{font-size: 18px; margin-bottom: 3px;}
  #resoect h2::after{font-size: 130px; bottom: 0; top: auto; margin-top: 0;}

  /*#bussiness*/
  #bussiness{height: 628px;}
  .bussiness_slide{height: 628px;}
  .bussiness_slide .bg1{height: 628px !important}
  .bussiness_slide .bg1 .tit{padding-top: 100px;}
  .tt_imgbox_slide{margin-top: 84px;}
  #bussiness .slick-slide img{width: 100%;}
  .work_text_ani span{font-size: 250px;}


  /*testimonials*/
  #testimonials .section__container h2{font-size: 30px;}

  /*contect*/
  .work_text_ani h3{font-size: 25px; margin-top: -70px;}
  .work_text_ani p{font-size: 20px;}
  .work_text_ani {margin-bottom: 60px;}
}

@media screen and (max-width: 1280px) {
  /*advantage*/
  .years_text, .years_img{width: 100%; display: block;}
  .years_text li{max-width: 100%;}
  .years_text li{padding: 20px 50px;}
  .years_text li::after{left: 11px;}

  /*testimonials*/
  #testimonials{height: auto;}
  .t_point1{display: none;}
  #testimonials .section__container h2{font-size: 25px;}
  .testimonial ul{padding: 15px; box-sizing: border-box;}
  .testimonial ul li{padding: 0; background-color: #fff;}
  .testimonial ul li img{width: 100%; max-width: 200px;}

  /*contact*/
  #contact .group{width: 100%; max-width:580px; float: none; margin: 0 auto; margin-bottom: 30px;}
  

}

@media screen and (max-width: 1252px) {
  /*#bussiness*/
  .bussiness_inner{max-width: 470px;}
  #bussiness{height: 1028px;}
  .bussiness_slide{height: 1028px;}
  .bussiness_slide .bg1{height: 1028px !important}
  .tt_imgbox_slide{margin-top: 500px;}
  .bussiness_slide .bg1 .tit{padding-top: 50px; width: 470px;}
}



@media screen and (max-width: 1160px) {

  .work_inner li{width: calc(100%/2); max-width: 425px;}
  .work_inner{margin-bottom: 0;}
  .about_anibox .artist{max-width: 500px;}
  
}


@media screen and (max-width: 1110px) {
  /*about*/
  #about .about_anibox span.weare{top: calc(0 / 670 * 100%); left: calc(240 / 1402 * 100%);}
  #about .about_anibox span.artist{top: calc(0 / 670 * 100%); left: calc(560 / 1402 * 100%);}
  #about .about_anibox span.digital{top: calc(110 / 670 * 100%); left: calc(140 / 1402 * 100%);}
  #about .about_anibox span.company{top: calc(216 / 670 * 100%); left: calc(442 / 1402 * 100%);}
  #about .about_anibox span.line_ani{top: calc(286 / 670 * 100%); left: calc(415 / 1402 * 100%);}
  .line_ani > img{width: 400px;}

  /*skill*/
  .text_hon {font-size: 40px; margin-bottom: -20px;}
  .text_hon::before{left: 39%; display: none;}
}

@media screen and (max-width: 1060px) {
  .map_area .txt .logo{width: 230px;}
  .map_area .txt .contact{padding: 0px 0 0 271px;}
}

@media screen and (max-width: 1024px) {
  /*home*/
  :root{
    --font-big: 35px;
    --font-large: 25px;
    --font-semi: 16px;
  }
  .home__container p{font-size: 18px;}
  .home__contact{width: 220px; height: 60px; line-height: 60px; font-size: 20px; margin-top: 45px;}
  #home{height: 850px;}
  .home__container{height: auto; box-sizing: border-box; padding-left: 15px;}

  /*about*/
  .about_us{font-size: 23px;}
  .about_us::after{height: 2px; width: 30px; margin-left: -50px;}
}

@media screen and (max-width: 994px) {
  .about_anibox .artist{max-width: 400px;}
  :root {
    --font-ani: 55px;
  }
  #about .about_anibox span.weare {
    top: calc(0 / 670 * 100%);
    left: calc(301 / 1402 * 100%);
  }
  #about .about_anibox span.digital {
    top: calc(138 / 670 * 100%);
    left: calc(225 / 1402 * 100%);
  }
  #about .about_anibox span.company {
    top: calc(255 / 670 * 100%);
    left: calc(442 / 1402 * 100%);
  }
  #about .about_anibox span.line_ani {
    top: calc(321 / 670 * 100%);
    left: calc(415 / 1402 * 100%);
  }
  .about_anibox{height: auto;}
  .about_anibox .artist{left: 330px;}
  .about_anibox span.line_ani{max-width: 420px;}
}

@media screen and (max-width: 965px) {
  #testimonials .section__container h2{font-size: 18px; font-family: var(--family-regular);}
  #testimonials{padding: 20px;}
  #testimonials .section__container h2{margin-bottom: 20px;}
}

@media screen and (max-width: 920px) {

  /*bussiness*/
  .bussiness_slide .bg1 h2{font-size: 25px; margin-bottom: 18px;}
  .bussiness_slide .bg1 p{font-size: 14px;}
  .bussiness_slide .bg1 b{font-size: 20px; margin-bottom: 15px;}
  .bussiness_slide .bg1 b small{font-size: 12px;}
  .bussiness_slide .bg1 a{margin-top: 30px;}
  .tt_imgbox_slide{margin-top: 385px; width: 380px; height: 380px; float: left;}
  #bussiness{height: 820px;}
  .bussiness_slide{height: 820px;}
  .bussiness_slide .bg1{height: 820px !important}

  /*contect*/

  .work_text_ani span{font-size: 225px;}
  .work_text_ani span:after{font-size: 50px;}

}

@media screen and (max-width: 860px) {
  /*about*/
  :root {
    --font-ani: 60px;
    --font-svg: 150px;
  }

  .line_ani > img {    width: 292px;}

}




@media screen and (max-width: 800px) {
  .about_anibox .artist{max-width: 300px;}
  /*home*/
  :root{
    --font-big: 25px;
    --font-ani: 35px;
    --font-svg: 150px;
  }
  .about_anibox span.line_ani{max-width: 285px;}
  .about_anibox .artist{left: 255px;}
  .home__container p{font-size: 16px;}
  .home__contact{width: 220px; height: 60px; line-height: 60px; font-size: 20px; margin-top: 45px;}
  #home{height: 800px; background-position: -700px 0;}


  .navbar__logo a > img{width: 90px !important}
  .navbar__toggle-btn {display: block;}

  #navbar {
    flex-direction: column;
    align-items: flex-start;
    background-color: #006fce;
  }
  #navbar.navbar--dark {
    padding: 16px;
  }

  .navbar__menu {
    flex-direction: column;
    text-align: center;
    width: 100%;
    display: none;
  }
  .navbar__menu.open {
    display: block;
  }

  /*value*/
  #value{padding: 10px; margin-top: 80px;}
  #value h2{font-size: 25px; margin-bottom: 10px;}
  #value p{font-size: 14px;}
  #value h2::after{font-size: 75px;}

  #professiional{height: auto; padding: 80px 10px 60px 10px; margin-top: -5px;}
  #professiional h2{font-size: 25px; margin-bottom: 10px; position: relative; z-index: 1;}
  #professiional p{font-size: 14px; position: static;}
  #professiional h2::after{font-size: 75px;}
  #professiional .text_profe{position: static;}

  #resoect h2{font-size: 25px; margin-bottom: 10px;}
  #resoect p{font-size: 14px;}
  #resoect h2::after{font-size: 75px;}
  #resoect{margin-top: 30px; height: auto;}
  #resoect span{font-size: 25px; margin-top: 47px;}
}

@media screen and (max-width: 750px) {
  :root {
    --font-large: 18px;
    --font-semi: 14px;
  }
  .about_us > b{font-size: 18px;}
  .about_us > b::before{height: 2px; top: 50%; transform: translateY(-50%);}
  .about_us ul li span{width: 280px;}
  #bussiness .prev-arrow{top: 0; right: 0; left: auto; transform: none;}
  #work{padding: 30px;}
  .work_inner li{height: 380px;}
  .text_abs {left: 15px;}
  .text_abs p:first-of-type{font-size: 24px;}
}



@media screen and (max-width: 710px) {
  /*about*/
  .about_anibox{height: auto;}
  .about_us{margin-top: 0;}
  .about_anibox{margin-top: 0;}
  :root {
    --font-ani: 40px; 
    --font-svg: 100px;
  }

  .about_us ul li span{width: 100%; text-align: left;}
  .about_us{text-align: left;}
  .about_us > b::before {margin-left: -85px;}
  .line_ani > img {width: 200px;}

  /*bussniess*/
  .sub_slide{background: #111 url(./imgs/sli_arrow_next.png) no-repeat center;
    width: 82px;
    height: 82px;
    top: 82px; right: 0; transform: none;}
  .sub_slider{display: none !important}
  .sub_slide:hover{border-radius: 0; background-color: #111;}
  #bussiness .prev-arrow:hover{background-color: #00c6b2 ;}
  #bussiness .prev-arrow{background-color: #00c6b2;}

  #resoect span::before{opacity: 0.2;}
  #advantage .section__container > span::before{opacity: 0.2;}
}



@media screen and (max-width: 690px) {
  .work_text_ani span{font-size: 160px;}
  .work_text_ani span:after{font-size: 30px;}
  .work_inner li{height: 325px;}
  #work { padding: 0;}
  .work_text_ani h3{margin-top: -37px;}
  .work_text_ani{margin-bottom: 0;}
  .work_inner{margin-top: 0;}
  .work_text_ani span:after{bottom: 18px;}

  /*contect*/
  .work_text_ani p{margin-bottom: 30px;}
}
@media screen and (max-width: 650px) {
  #about .about_anibox span.weare {
    top: calc(0 / 670 * 100%);
    left: calc(200 / 1402 * 100%);
  }
  #about .about_anibox span.digital {
    top: calc(138 / 670 * 100%);
    left: calc(100 / 1402 * 100%);
  }
  .about_anibox .artist{left: 165px;}
}

@media screen and (max-width: 615px) {
  .textarea_box p{font-size: 16px; margin-bottom: 15px;}
  .textarea_box p br{display: none;}
  .textarea_box{padding: 20px;}

  .about_anibox .artist{max-width: 215px; left: 205px;}
}

@media screen and (max-width: 576px) {
  /*value*/
  #value h2{font-size: 21px;}
  #value h2::after{font-size: 55px;}
  #value p{font-size: 12px;}

  /*professiional*/
  #professiional h2{font-size: 21px;}
  #professiional p{font-size: 12px;}
  #professiional p br{display: none;}
  #professiional h2::after{font-size: 55px;}

  #professiional{padding: 50px 10px 30px 10px;}

  /*advantage*/
  #advantage .section__container > span{font-size: 40px;}

  .work_inner li{background-size: cover !important; height: 280px;}

  .text_abs p:first-of-type{font-size: 16px;}
  .text_abs p:last-of-type{font-size: 10px;}
  .text_abs{left: 8px; bottom: 8px;}

  /*contect*/
  .work_text_ani span{font-size: 120px;}
  .work_text_ani h3{font-size: 20px;}
  .work_text_ani p{font-size: 18px;}
  #contact .group label{font-size: 24px;}
  #contact .group input{padding: 10px 10px 10px 5px;}
  #contact .text_jone label{font-size: 24px;}
}

@media screen and (max-width: 500px) {
  .about_anibox .artist{max-width: 100%; left: 0; top: 120px;}
  
  #about .about_anibox span.weare{position: relative; top: auto; left: auto;}
  #about .about_anibox span.digital{position: relative; top: auto; left: auto;}
  #about .about_anibox span.company{position: relative; top: auto; left: auto;}
  .about_anibox span.line_ani{display: none;}
  .about_anibox{text-align: right;}
  .weare{margin-right: 15px;}
  .text_abs p:first-of-type {
    font-size: 14px;}
}


@media screen and (max-width: 492px) {
  .work_text_ani span{font-size: 120px;}
  .work_text_ani span:after{font-size: 18px; letter-spacing: 1px;}
  .work_inner{margin-top: 10px;}
  
  /*testimonials*/
  #testimonials .section__container h2{font-size: 12px;}
  .testimonial ul li{width: calc(100%/3);}
  .testimonial ul li:last-of-type{display: none;}
  #testimonials .section__container h2 br{display: block;}

  /*contact*/
  #contact{padding: 20px;}
  .contect_send{margin-top: 24px;}
  .contect_send {width: 270px; height: 60px; line-height: 60px; font-size: 22px;}
}

@media screen and (max-width: 470px) {
  .bussiness_slide .bg1 .tit{width: 100%; box-sizing: border-box; padding-left: 15px;}
  .tt_imgbox_slide{width: 100%; box-sizing: border-box; padding: 0 15px;}
}

@media screen and (max-width: 460px) {
  /*home*/
  #home{height: 660px;background-position: -156px 50px;}
  .home__container h1{margin-top: 220px;}
  .navbar__toggle-btn{right: 15px;}
  .company{display: block;}
  .text_abs p:first-of-type{text-shadow: 1px 1px 3px #00000082;}
  .text_abs p:last-of-type{text-shadow: 1px 1px 3px #00000082;}
  
  
  /*about*/

  .section{padding: 20px;}
  .text_hon{font-size: 29px; margin-bottom: -13px;}
  .about_us ul{margin-top: 25px;}
  .about_us > b::before{margin-left: -79px;}
  #bussiness .prev-arrow{width: 60px; height: 60px;}
  #bussiness .sub_slide{width: 60px; height: 60px; top: 60px;}

  /*advantage*/
  .years_text span{font-size: 21px;}
  .years_text p{font-size: 14px;}
  .cercle_han1{width: 340px; height: 340px;}
  .cercle_han2{width: 320px; height: 320px;}
  .cercle_han3{width: 300px; height: 300px;}
  .cercle_all{height: 340px;}
  #advantage .section__container{background-position: center;}
  .textarea_box p{font-size: 13px;}
  .cercle_all{margin-bottom: 10px;}

  /*work*/
  .work_inner li{height: 230px;}
}

@media screen and (max-width: 430px) {
  #advantage .section__container > span{font-size: 31px;}
  .bol_control {
    width: 200px;
    background-size: contain;
    height: 300px;
    top: 0;
    left: 0;
}
.bol_control2 {
  width: 200px;
  background-size: contain;
  height: 300px;
  right: -78px;
  top: 0;
  left: auto;
}


}

@media screen and (max-width: 400px) {
  /*home*/
  :root {
    --font-big: 20px;
    --font-ani: 30px;
    --font-svg: 90px;
    --font-large: 14px;
    --font-semi: 12px;
  }
  .home__container p{font-size: 14px;}
  .home__container h1{margin-top: 220px; margin-bottom: 12px;}
  .home__contact{width: 190px; height: 55px; line-height: 55px; font-size: 18px;}
  .about_anibox .artist{height: auto; top: 93px;}


  /*about*/

  .line_ani > img { width: 135px;}
  .about_anibox{margin-top: 0;}
  .text_hon{font-size: 22px; margin-bottom: -11px;}
}

@media screen and (max-width: 380px) {
  .work_text_ani span{font-size: 100px;}
  .work_text_ani span:after{font-size: 14px; bottom: 15px;}

  /*map*/
  .contact_traffic ul li {line-height: 23px;font-size: 14px;}
  .contact_traffic h3{font-size: 18px;}
  .contact_traffic h3 img{margin-bottom: -10px;}
}

@media screen and (max-width: 360px) {
  /*contect*/
  .work_text_ani span{font-size: 80px;}
  .work_text_ani h3{font-size: 16px; margin-bottom: 0; margin-top: -22px;}
  .work_text_ani p{font-size: 14px;}
  #contact .group label{font-size: 18px;}
  #contact .text_jone label{font-size: 18px;}
  #contact .group input{padding: 5px;}
  .text_jone{margin-top: 10px;}
  .container{font-size: 16px;}
  .custom-check .rect-2{left: 8%;}
  .contact_traffic:after{display: none;}
}

@media screen and (max-width: 350px) {
  /*home*/
  :root {
    --font-big: 18px;
  }
  #home{height: 550px; background-position: -290px -105px;}
  .home__container h1{margin-top: 182px;}
  .home__container p{font-size: 12px;}

  #professiional h2::after {font-size: 40px; bottom: 10px;}
  #resoect h2::after{font-size: 40px; bottom: 10px;}


  /*busniess*/
  #bussiness{height: 740px;}
  .bussiness_slide{height: 740px;}
  .bussiness_slide .bg1{height: 740px !important}


  /*advantage*/
  .cercle_han1{width: 300px; height: 300px;}
  .cercle_han2{width: 270px; height: 270px;}
  .cercle_han3{width: 240px; height: 240px;}
  .cercle_han3 h3{font-size: 23px;}

  
  /*work*/
  .work_inner li{height: 205px;}
  .text_abs p:first-of-type{font-size: 12px; text-shadow: 1px 1px 3px #00000082;}

  .t_point2{width: 530px; height: 746px;}
  
}


/*map*/
@media all and (max-width: 576px) { 
	.map_area .txt { position: relative; bottom: auto; left: auto; transform: translateX(0); margin-top: -30px; width: auto;}
	
	.map_area .txt .contact { font-size: 13px; letter-spacing: 0; line-height: 180%; padding: 20px 0 0;text-align: center; clear:both}
	.map_area .txt .txt_wrap{border-radius: 0px 0px 60px 0px;  padding: 0 0 30px;}
	.map_area .txt .bt { position: static; border-radius: 65px;  border-width: 2px; font-size: 15px; margin: 25px auto 0; width: 150px; line-height: 40px; height: 40px;}
	.map_area .txt .logo { position: relative; display: block;  top: auto; left: auto; border-right: 0;  width: 100%; line-height: 70px;  height: 70px;}
  .txt_wrap p{text-align:center;}
  .map_area .txt{bottom: 0;}
  .contact_traffic{margin: 0;}
  .map_area .txt .logo{line-height: 130px;}
}

@media all and (min-width: 577px) and (max-width:992px) {  
	.map_area .txt { position: relative; bottom: auto; left: auto; transform: translateX(0); margin-top: -30px; width: auto;}
	
	.map_area .txt .contact { font-size: 13px; letter-spacing: 0; line-height: 180%; padding: 20px 0 0;text-align: center; clear:both}
	.map_area .txt .txt_wrap{border-radius: 0px 0px 20px 0px;  padding: 0 0 30px;}
	.map_area .txt .bt { position: static; border-radius: 65px;  border-width: 2px; font-size: 15px; margin: 25px auto 0; width: 150px; line-height: 40px; height: 40px;}
	.map_area .txt .logo { position: relative; display: block;  top: auto; left: auto; border-right: 0;  width: 100%; line-height: 70px;  height: 70px;}
  .txt_wrap p{text-align:center;}
  .map_area .txt{bottom: 0;}
  .contact_traffic{margin: 0;}
  .map_area .txt .logo{line-height: 130px;}
}

@media all and (min-width: 993px) and (max-width:1200px) {  
	.map_area .txt {margin-top: -30px;width: 100%;}
	.map_area .txt .txt_wrap{border-radius:0px 0px 20px 0px; padding:0 0 30px; width:100%;}
	.map_area .txt .logo{display:block;position:relative;top:auto;left:auto;border-right:0; margin-left:0;width:100%;}
	.map_area .txt .logo:before{content:"";position:absolute;bottom:0;left:50%;margin-left:-88px;background-color:#1a7dd3;width:177px;height:1px;}
	.map_area .txt .contact {line-height:180%;padding:20px 0 0;text-align:center;}
	.map_area .txt .contact .tel{font-weight:300;}
	.map_area .txt .bt{position:static;border-radius:65px;margin:35px auto 0;width:150px;}
  .txt_wrap p{text-align:center;}
  .map_area .txt{bottom: -190px;}
  .map_area .txt .logo{line-height: 130px;}
}

@media all and (max-width: 500px) {
  #mapcontrol{padding: 0;}
  #map{display: none;}
  #mapmini{display: block;}
  .map-btns{display: none;}
}
/* //map*/


/*footer*/
@media screen and (max-width: 769px) {
  .footer_in address { width:100%}
.footer_in .customer { width:100%; border-left:0; margin-left:0; padding-left:0}

}

@media screen and (max-width: 576px) {
.footer_in { padding:0 20px; padding-top: 10px;}
.foot_menu { padding:20px 0}
.foot_menu .sns { float:left}
.foot_menu .fm li:first-of-type{padding-left: 20px;}
.footer_in .customer{margin-top: 0;}
}

@media screen and (max-width: 375px) {
  .foot_menu .fm li a{font-size: 12px;}
  .foot_menu .fm li{margin-right: 0;}
}
/* //footer*/


/*test*/

.txtWrap .tit img{
  /*
	animation-name:img;
    -webkit-animation-duration:2s;
    -webkit-animation-fill-mode: forwards;*/

}

.home__container h1 b{
  display: inline-block;
  /*
  animation-name:img;
  -webkit-animation-duration:2s;
  -webkit-animation-fill-mode: forwards;*/
}






.sub div:after{content: ""; display: block;clear: both;}
.sub div{float: left; margin-right: 20px;}

.sub span{
	font-family: 'Poppins';
	opacity: 0;/*
	animation-name:txt;
    -webkit-animation-duration:8s;
    -webkit-animation-fill-mode: forwards;*/
   display:block;font-size:45px;
   font-weight: 600;	
}

.home__container h1 strong{
	opacity: 1;
	/*animation-name:txt;
    -webkit-animation-duration:8s;
    -webkit-animation-fill-mode: forwards;*/
   display:inline-block;
   margin: 0;
   padding: 0;
}




.sub span{float: left;}

@keyframes bg{
    0%{background-color: #5300a1;opacity: 0.8}
    50%{background-color: #ca00a6 ;opacity:1}
    100%{background-color:#5300a1;opacity: 0.8}
}

/*
@keyframes mainTit{
    0%{
    	color: #fff;
    	transform: translate(-50%,-50%) scale(0);opacity:0;
    }
    30%{
    	
    	transform: translate(-50%,-50%) scale(1);opacity: 1;
    }
    50%{
    	color: #fff;
    }
    80%{
    
    	transform: translate(-50%,-50%) scale(1);opacity: 1;
    }
    100%{
    	opacity: 1;
      color: #ffe400;
    	transform: translate(-50%,-50%) scale(1);
    }
}*/

@keyframes img{
	0%{transform: rotateY(0);}
	100%{transform: rotateY(360deg);}
}
@keyframes txt{
	0%{ opacity: 0;color: #224c8a;transform: scale(3);}
	33%{ opacity: 0;color: #fff;transform: scale(10);}
	66%{transform: scale(1); opacity: 0.7;color: #5a00ff;}
	100%{transform: scale(1); opacity: 1;color: #fff;}
}
@keyframes txt2{
	0%{ opacity: 0;color: #224c8a;transform: scale(3);}
	33%{ opacity: 0;color: #fff;transform: scale(10);}
	66%{transform: scale(1); opacity: 0.7;color: #fff;}
	100%{transform: scale(1); opacity: 1;color: #fff;}
}

.txtWrap .tit img:nth-child(1){animation-delay: 0.2s;}
.txtWrap .tit img:nth-child(2){animation-delay: 0.4s;}
.txtWrap .tit img:nth-child(3){animation-delay: 0.6s;}
.txtWrap .tit img:nth-child(4){animation-delay: 0.8s;}
.txtWrap .tit img:nth-child(5){animation-delay:   1s;}
.txtWrap .tit img:nth-child(6){animation-delay: 1.2s;}
.txtWrap .tit img:nth-child(7){animation-delay: 1.4s;}


/*
.home__container h1 span{
  animation-name:mainTit;
    -webkit-animation-duration:  5s;
    -webkit-animation-fill-mode: forwards;
}



.home__container h1 b:nth-of-type(1){animation-delay: 0.2s;}
.home__container h1 b:nth-of-type(2){animation-delay: 0.4s;}
.home__container h1 b:nth-of-type(3){animation-delay: 0.6s;}
.home__container h1 b:nth-of-type(4){animation-delay: 0.8s;}
.home__container h1 b:nth-of-type(5){animation-delay:   1s;}
.home__container h1 b:nth-of-type(6){animation-delay: 1.2s;}
.home__container h1 b:nth-of-type(7){animation-delay: 1.4s;}




.home__container h1 strong:nth-of-type(1){animation-delay: 3s; color: #fff;}
.home__container h1 strong:nth-of-type(2){animation-delay: 3.2s;}
.home__container h1 strong:nth-of-type(3){animation-delay: 3.4s;}
.home__container h1 strong:nth-of-type(4){animation-delay: 3.6s;}
.home__container h1 strong:nth-of-type(5){animation-delay: 3.8s;}
.home__container h1 strong:nth-of-type(6){animation-delay: 4s;}
.home__container h1 strong:nth-of-type(7){animation-delay: 1.4s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(8){animation-delay: 1.6s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(9){animation-delay: 1.8s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(10){animation-delay: 2s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(11){animation-delay: 2.2s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(12){animation-delay: 2.4s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(13){animation-delay: 2.6s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}

.home__container h1 strong:nth-of-type(14){animation-delay: 1s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(15){animation-delay: 1s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(16){animation-delay: 1.2s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(17){animation-delay: 1.2s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(18){animation-delay: 1.4s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(19){animation-delay: 1.4s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(20){animation-delay: 1.6s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(21){animation-delay: 1.6s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(22){animation-delay: 1.8s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(23){animation-delay: 1.8s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(24){animation-delay: 2s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(25){animation-delay: 2.2s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(26){animation-delay: 2.4s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}
.home__container h1 strong:nth-of-type(27){animation-delay: 2.6s; animation-name:txt2; -webkit-animation-duration:8s; -webkit-animation-fill-mode: forwards;}


*/



.has-animation {
  position: relative;
}
.has-animation .test_has, .has-animation li{
  opacity: 0;
}
.has-animation .test_has, .has-animation li{
  animation: textHidden 0.1s 1.1s forwards;
}
.has-animation.animate-in:before, .has-animation.animate-in:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10;
}
.has-animation.animate-in:before {
  background-color: #0fe4d2;
}
.has-animation.animate-in:after {
  background-color: #202020;
  animation-delay: .5s;
}
.has-animation.animation-ltr.animate-in:before {
  animation: revealLTR 1.8s ease;
}
.has-animation.animation-ltr.animate-in:after {
  animation: revealLTR 1s .6s ease;
}
.has-animation.animation-rtl.animate-in:before {
  animation: revealRTL 1.8s ease;
}
.has-animation.animation-rtl.animate-in:after {
  animation: revealRTL 1s .6s ease;
}
@keyframes revealRTL {
  0% {
      width: 0;
      right: 0;
  }
  65% {
      width: 100%;
      right: 0;
  }
  100% {
      width: 0;
      right: 100%;
  }
}
@keyframes revealLTR {
  0% {
      width: 0;
      left: 0;
  }
  65% {
      width: 100%;
      left: 0;
  }
  100% {
      width: 0;
      left: 100%;
  }
}
@keyframes textHidden {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
.h2_has{position: relative;}

.bg_control_text{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0 0 0 0;
  background: #dee0ee;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: bottom right;
}

.bg_control_text2{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0 0 0 0;
  background: #dee0ee;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: bottom right;
}
.h3_has li{position: relative;}



#value h2::after{transform: translateX(-100px); transition: all 2s; opacity: 0; animation-delay: 300s;}
#value h2.active::after{transform: translateX(0); transition: all 2s; opacity: 1; animation-delay: 300s;}


.text_profe h2::after{transform: translateX(-100px); transition: all 2s; opacity: 0; animation-delay: 300s;}
.text_profe h2.active::after{transform: translateX(0); transition: all 2s; opacity: 1; animation-delay: 300s;}

#creative .section__container{text-align: left; max-width: 1400px; position: relative;}
#creative .section__container h2{font-size: 36px; line-height: 145%; margin-top: 70px; margin-bottom: 15px;}
#creative .section__container h2 span{color: #2da7eb; font-family: 'GmarketSansBold';}
#creative .section__container p{font-size: 24px; line-height: 145%; margin-top: 20px; font-family: 'GmarketSansMedium';}

.line_box_creative{position: relative; margin-top: 120px; padding-bottom: 100px;}
.line_box_creative .inner{max-width: 1400px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
.line_box_creative .num_creative span{width: 50px; height: 50px; border-radius: 5px; color: #fff; line-height: 50px; font-size: 20px; background-color: #1b54ae; display: block;}
.line_box_creative .num_creative p{font-size: 30px; font-family: 'GmarketSansBold'; margin-top: 20px;}
.line_box_creative .line{width: 100%; height: 1px; background-color:  #d6d6d6; position: absolute; top: 24px; z-index: -1;}

.img_box_creative{position: absolute; top: 117px; right: 0; text-align: center;}

.text_animation_cre{
  transition: all 0.5s;
  -webkit-text-stroke: 4px #d6f4f4;
  font-variation-settings: "wght" 900, "ital" 1;
  font-size: 15rem;
  text-align: center;
  color: transparent;
  font-family: "Meta", sans-serif;
  text-shadow: 10px 10px 0px #07bccc,
    15px 15px 0px #e601c0,
    20px 20px 0px #e9019a,
    25px 25px 0px #f40468,
    45px 45px 10px #482896;
  cursor: pointer;
}

.text_animation_cre:hover {
  font-variation-settings: "wght" 100, "ital" 0;
  text-shadow: none;
}
.div_vgg{background-color: #8357eb; width: 70%;}
.img_box_creative span{font-size: 18px; display: block; font-family: 'GmarketSansMedium'; }


.maintenance{font-size: 0; position: relative;}
.left_maintenance{display: inline-block; width: 50%; background: url(./imgs/bg_gogak.png) no-repeat; vertical-align: top; height: 960px; color: #fff; padding: 95px 0 95px 95px;}
.left_maintenance h2 span{font-size: 100px; }
.left_maintenance h2{font-size: 72px; text-align: left; color: #fff; font-family: 'GmarketSansMedium';}

.down_maintenance p{font-size: 24px; margin-bottom: 30px; color: #fff;}
.down_maintenance h3{font-size: 48px; margin-bottom: 50px; color: #fff;}
.down_maintenance {text-align: left; font-family: 'GmarketSansMedium';}

.right_maintenance{display: inline-block; width: 50%; vertical-align: top; height: 960px; font-size: 0; overflow: hidden;}  
.flex_box{display: flex; justify-content: space-between; flex-direction: column; height: 100%; overflow: hidden;}

#sever_boan.section{padding: 0;}
.box4_maintenance{display: inline-block; width: 50%; height: 50%; vertical-align: top; padding: 45px; box-sizing: border-box; cursor: pointer; transition: all 0.5s; z-index: 9; position: relative;}
.box4_maintenance:hover{transition: all 0.5s;}

.bg_maintence1{background: url(./imgs/maintenance_bg_1.png) no-repeat;}
.bg_maintence2{background: #ddd; color: #000;}
.bg_maintence3{background: url(./imgs/maintenance_bg_2.png) no-repeat 45% 50%; background-size: cover;}
.bg_maintence4{background: url(./imgs/maintenance_bg_3.png) no-repeat;}

.bg_maintence2.box4_maintenance h4{color: #000;}
.bg_maintence2.box4_maintenance p{color: #000;}


.box4_maintenance h4{font-size: 48px; color: #fff; text-align: left; font-family: 'GmarketSansBold'; margin: 0; }
.box4_maintenance p{font-size: 26px; font-family: 'GmarketSansMedium'; color: #fff; text-align: left;}



.flex_controllbox{
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(90deg, #eceff5, #d9dfe5);
  margin: 0;
}


.watch {
  position: relative;
  min-width: 480px;
  width: 480px;
  height: 480px;
  opacity: 0;
  transform: scale(0);
  animation: watch-intro 1s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards 0.4s;
}

.box4_maintenance.bg_maintence2{padding: 0;}

@keyframes watch-intro {
  to {
    opacity: 1;
    transform: scale(0.6);
  }
}

.watch img {
  position: absolute;
}

.watch-body {
  z-index: -1;
}

.watch-cap {
  z-index: 100;
  /* 위치 세부 조정 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.watch-body{
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hand-hours {
  /* 위치 세부 조정 */
  top: 0;
  left: 242px;
  transform-origin: 50% 100%;
  transform: rotate(20deg);
}

.hand-minutes {
  /* 위치 세부 조정 */
  top: 0;
  left: 233px;
  transform-origin: 50% 100%;
  transform: rotate(100deg);
}

.hand-seconds {
  /* 위치 세부 조정 */
  top: 0;
  left: 50%;
  transform-origin: 50% 100%;
  transform: rotate(220deg);
}


/* -------------------------------------------------------
 * 재사용 클래스 */
.a11y-hidden {
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0,0,0,0);
}


.flex_controllbox{position: relative;}
.flex_controllbox .flex_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 45px; z-index: 9;}

.work_text_ani span{height: auto;}
.work_text_ani h3{margin-top: 0;}


@media screen and (max-width: 1700px) {
  .left_maintenance h2 span{font-size: 80px;}
  .left_maintenance h2{font-size: 50px;}
  .down_maintenance h3{font-size: 35px;}
  .down_maintenance p{font-size: 18px;}
  .box4_maintenance h4{font-size: 35px;}
}

@media screen and (max-width: 1568px) {

}

@media screen and (max-width: 1478px) {
  .text_animation_cre{font-size: 13rem;}
}

@media screen and (max-width: 1450px) {
  .left_maintenance{width: 100%; height: 680px; max-width: 961px;}
  .right_maintenance{width: 100%; max-width: 961px;}
}

@media screen and (max-width: 1306px) {
  .text_animation_cre{font-size: 10rem; padding-bottom: 42px;}
}

@media screen and (max-width: 1180px) {
  .div_vgg{width: 100%;}
  .right_maintenance{height: auto;}
  .img_box_creative{position: relative; top: auto; right: auto; margin-top: 20px;}
  .line_box_creative{margin-top: 55px;}
  #creative .section__container h2{margin-top: 0;}
}

@media screen and (max-width: 840px) {
  #creative .section__container h2{font-size: 26px;}
  .text_animation_cre {font-size: 7rem;}
  #creative .section__container p{font-size: 16px;}
  .line_box_creative .num_creative p{font-size: 16px; font-family: 'GmarketSansMedium';}
  .line_box_creative .num_creative span{width: 30px; height: 30px; line-height: 30px; font-size: 14px;}
}

@media screen and (max-width: 724px) {
  .left_maintenance{height: 435px; padding: 50px;}
  .left_maintenance h2{font-size: 40px;}
  .left_maintenance h2 span{font-size: 55px;}
  .down_maintenance h3{font-size: 25px; margin-bottom: 20px;}
  .down_maintenance p{font-size: 16px; margin-bottom: 10px;}
  .box4_maintenance{width: 100%; height: 435px;}
  .bg_maintence1,
  .bg_maintence2,
  .bg_maintence3,
  .bg_maintence4{background-size: cover; height: auto;}
  .flex_controllbox{height: 435px;}
}


@media screen and (max-width: 630px) {
  .text_animation_cre{font-size: 5rem;}
}

@media screen and (max-width: 500px) {
  .text_animation_cre{font-size: 4rem; text-indent: -30px;}
  #creative .section__container h2{font-size: 20px;}
  #creative .section__container p{font-size: 13px;}
  #creative .section__container p br{display: none;}
  .img_box_creative span{font-size: 14px;}
  .line_box_creative .num_creative p{font-size: 11px;}
  .line_box_creative{margin-top: 20px;}
  .line_box_creative{padding-bottom: 0;}

  .left_maintenance{padding: 15px;}
  .left_maintenance h2{font-size: 25px;}
  .left_maintenance span{font-size: 25px;}
  .down_maintenance h3{font-size: 18px;}
  .down_maintenance p{font-size: 14px;}
  .down_maintenance p br{display: none;}
  .left_maintenance{height: 320px;}
  .box4_maintenance{padding: 25px;}
  .box4_maintenance{height: 250px;}
  .box4_maintenance h4{font-size: 22px;}
  .box4_maintenance p{font-size: 18px;}
  .box4_maintenance.bg_maintence2{height: auto;}
}



@media screen and (max-width: 1242px) {
  .arrow_point{max-width: 370px; margin-bottom: -543px;}
}

@media screen and (max-width: 1052px) {
  .arrow_point{max-width: 270px; margin-bottom: -627px; z-index: 9;}
}

@media screen and (max-width: 800px) {
  .arrow_point{max-width: 200px; margin-bottom: -698px; z-index: 9;}
  .work_text_ani span{height: auto;}
}

@media screen and (max-width: 692px) {
  #professiional .text_profe{width: 65%;}
  .flex_controllbox{height: 100%;}
  #professiional .section__container{
    display: flex;
    justify-content: flex-end;
  }
  .text_profe h2 br{display: none;}
  .text_profe p br{display: none;}
}

@media screen and (max-width: 655px) {
  .work_text_ani span svg{padding: 10px 70px;}
  .work_text_ani span:after{right: 70px;}
}


@media screen and (max-width: 572px) {
  .arrow_point{margin-bottom: -664px;}
}


@media screen and (max-width: 546px) {
  #resoect.section{padding: 50px 10px 50px 10px;}
  #resoect h2 br{display: none;}
  #resoect p br{display: none;}
  .text_profe{width: 65%;}
  #resoect .section__container {
    display: flex;
    justify-content: flex-end;
  }
  #resoect span{position: absolute; left: 0; bottom: 0;}
  #resoect span::before{margin-left: 0;}
}

@media screen and (max-width: 500px) {
  .work_text_ani span:after{font-size: 23px; letter-spacing: 0;}
}


@media screen and (max-width: 450px) {
  .arrow_point{max-width: 130px; height: 500px;}
  .arrow_point{margin-bottom: -422px;}
  .text_profe{width: 100%;}
  #resoect span{bottom: -55px;}
  .bussiness_slide .bg1 h2{text-shadow: 2px 2px 4px #0000003d;;}
}

@media screen and (max-width: 410px) {
  .work_text_ani span:after{bottom: 5px;}
}


@media screen and (max-width: 1180px) {
  .box4_maintenance {height: 480px;}
}
@media screen and (max-width: 690px) {
  .box4_maintenance {height: auto;}
  .work_text_ani span svg{padding: 10px 21px;}
}


#creative.section{padding: 0;}
.contact_traffic ul h3{text-align: left;}


.button-container-2 {
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
}
.button-container-2 button {
  font-family: var(--family-regular);
  width: 100%;
  height: 100%;
  font-size: var(--font-medium);
  background: #ffcc00;
  -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png");
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  border: none;
  transition: all 0.5s ease;
  color: #fff;
  cursor: pointer;
  -webkit-animation: ani 0.7s steps(29) forwards;
  animation: ani 0.7s steps(29) forwards;
}

.home__contact:hover{
  border:2px solid #ffcc00;
  box-shadow: 2px 2px 8px #000;
  transition: all 0.5s ease;
}

.button-container-2 button:hover {


  -webkit-animation: ani2 0.7s steps(29) forwards;
  animation: ani2 0.7s steps(29) forwards;
  color: #000;
  transition: all 0.5s ease;
}

.mas {
  font-family: var(--family-regular);
  position: absolute;
  color: #fff;
  text-align: center;
  width: 100%;
  position: absolute;
  font-size: var(--font-medium);
  overflow: hidden;
}
@-webkit-keyframes ani {
  from {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
  }
  to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
  }
}
@keyframes ani {
  from {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
  }
  to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
  }
}
@-webkit-keyframes ani2 {
  from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
  }
  to {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
  }
}
@keyframes ani2 {
  from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
  }
  to {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
  }
}

/*추가*/
.copyright {
  display:block;
  margin-top: 100px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.copyright a{
  text-decoration: none;
  color: #EE4E44;
}


/****** CODE ******/

.file-upload{display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px;}
.file-upload .file-select{display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select .file-select-button{background:#dce4ec;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px; }

.btnbox_{max-width: 200px; height: 100px; line-height: 100px; background-color: #ddd; color: #000; text-align: center; margin: 0 auto; border-radius: 15px; margin-top: 20px; cursor: pointer;}



.work26{background: url(./imgs/logo_gyeongi2.png) no-repeat center; background-size: cover;}
.work25{background: url(./imgs/logobig.png) no-repeat center; background-size: cover;}
.work27{background: url(./imgs/logo_sang.png) no-repeat center; background-size: cover;}



.popup_ccom {
  display: inline-block;
  text-decoration: underline;
  color: #000;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 10px;
}


.popfixed_box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}


.popup_content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  width: 300px;
  text-align: left;
  font-size: 14px;
  padding-top: 30px;
}
.popup_content p{font-size: 14px;}

.close_popup {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  padding:5px 10px;
  border-radius: 15px;
  background-color: #078cff;

}