/**
* Template Name: HeroBiz - v2.2.0
* Template URL: https://bootstrapmade.com/herobiz-bootstrap-business-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/**
* Check out variables.css for easy customization of colors, typography, and other repetitive properties
*/
/*
@font-face {
  font-family: "Ddangs Font";
  font-weight: 700;
  src: url("../fonts/ddangsBold.woff") format("woff2");
}
@font-face {
  font-family: "Ddangs Font";
  font-weight: 500;
  src: url("../fonts/ddangsMedium.woff") format("woff2");
}
@font-face {
  font-family: "Ddangs Font";
  font-weight: 300;
  src: url("../fonts/ddangsLight.woff") format("woff2");
}

@font-face {
  font-family: "Ddangs Font";
  font-weight: 700;
  src: url("../fonts/ddangsBold.woff2") format("woff2");
}
@font-face {
  font-family: "Ddangs Font";
  font-weight: 500;
  src: url("../fonts/ddangsMedium.woff2") format("woff2");
}
@font-face {
  font-family: "Ddangs Font";
  font-weight: 300;
  src: url("../fonts/ddangsLight.woff2") format("woff2");
}
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body{}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary); font-weight : 700;
}

.txt-orange{color:#ff6620;}
.txt-white{color:#fff;}
.txt-bold{font-weight : 700;}
.h-blank{height:30vw;}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--color-white);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid #ff6620;
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

@-webkit-keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}



/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
	display:block; 
	padding: 0px 0;
}


.section-header {
  text-align: center;
  padding-bottom: 40px;
}

.section-header h2 {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--color-secondary);
}

.section-header p {
  margin: 0 auto;
  color: var(--color-secondary-light);
}

@media (min-width: 1280px) {
  .section-header p {
    max-width: 80%;
  }
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 995;
  background: #ff6620;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--color-white);
  line-height: 0;
}

.scroll-top:hover {
  background: #e84c0f;
  color: var(--color-white);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Animated ddang Section
--------------------------------------------------------------*/
#main{position:relative; font-family: 'Ddangs Font';color:#000;font-size : 1.688vw;font-weight : 400;line-height : 2.88vw;}
#main h3{font-size : 4.66vw;}
#main h4{font-size : 2.44vw; font-style:italic;}

.container{max-width : 1440px!important;}
.container_title{max-width : 1024px!important;margin : 0 auto;}
.container_title-m{max-width : 860px!important;margin : 0 auto;margin-top:4.6vw;}
.container_slide{max-width : 1200px!important;margin : 0 auto;}
.container_title-blank{margin-top:11vw;}
.up-bg{position:absolute;top:88px;}
.bg-top-title{background:#ff6620;}
.text-right{text-align : right;}

.h10{height : 20px;}


.top-title, .about , .slide-box { overflow:hidden; }

/*--------------------------------------------------------------
#다운로드 폰트
--------------------------------------------------------------*/

/*
.f_down { position:sticky; margin-top:-100px;top:30%;float : right;right :9%;z-index:99;width : 11.83%; height : 1px!important; transition:all 0.3s; }
*/
/*
.f_down { position:fixed; margin-top:-100px;top:70%;float : right;right :1.875rem;z-index:10;width : 8.125rem; height : 1px!important; transition:all 0.3s; }
*/
.f_down { position:absolute; float : right; z-index:10;max-width : 8.125rem; height : 1px!important; transition:all 0.3s; }

.f_down img{float : left; }
.f_down_01 img{float : left; width:47%; } 
.f_down > .f_down_01 {
	position : absolute;
	left:-65px; 
	z-index:10;
	
	animation-name: f_down_01;
	animation-duration:0.5s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-direction:alternate-reverse;
	animation-fill-mode: both;
}

@media (max-width: 1024px) {
	.f_down > .f_down_01 { left:-40px; } 
} 
/*
.f_down img{float : left;width : 8vw;}
.f_down_01 img{float : left;width : 4.88vw;}
.f_down > .f_down_01 {
	position : absolute;
	z-index:99;
	
	animation-name: f_down_01;
	animation-duration:0.5s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-direction:alternate-reverse;
	animation-fill-mode: both;
}
*/

@-webkit-keyframes f_down_01 {
  from{
    transform: rotate( -3deg );
  }
  to{
    transform: rotate( 3deg );
  }
}

.f_down > .f_down_ddogi {float : right;z-index:97;}
/*--------------------------------------------------------------
# top-title Section
--------------------------------------------------------------*/

.top-title {width: 100%;position: relative;padding-top:9.5vw;}
.top-title .top-title-01 img{max-width : 480px;}

.top-title .top-title-motion{max-height : 325px!important; overflow:hidden;z-index:9;}
.top-title .top-title-motion img{width : 100%;max-width : 460px;/*max-width : 860px;margin-top:-10%;*/}
.top-title .top-title-motion video{width : 100%;max-width : 860px;margin-top:-10%;}
.top-title .top-title-02{margin-bottom : 2.633vw;}
.top-title .top-title-02 img{max-width : 730px;}
.top-title .top-title-03{margin-bottom : 2.133vw;}
.top-title .top-title-03 img{max-width : 350px;}
.top-title .top-title-04 img{max-width : 650px;}

.top-title .title-top-deco{width : 100%;top:0;margin: 0 auto;text-align : center;}
.top-title .title-top-deco img{top:0;width : 100%;}




.top-title .about-top-deco{
	width : 100%;top:0;margin: 0 auto;text-align : center; 
	background:#fce4c5 url("/images/fontpage/about-cont-deco.svg") center 10.99vw / 93.33vw 100vw no-repeat;
}
.top-title .about-top-deco img{top:0;width : 100%;}

.top-title-ddogi-motion{position:absolute; top : 4.277vh; right :-3vw;z-index:99;}
	.top-title-ddogi-motion img{width : 30vw;}
.top-title-hamgu-motion{position:absolute; left :-3vw; top : 48.66vh;z-index:99;}
	.top-title-hamgu-motion img{width : 22.5vw;}
 

.top-title .L-motion {
		
	  animation-name:ddogi;
	  animation-duration:0.3s;
	  animation-timing-function:cubic-bezier(0.4,1,1,1);
	  animation-iteration-count: 1;   /*무한반복  infinite; */
	  animation-direction:alternate-reverse;
	  animation-fill-mode: both;
		
}
@-webkit-keyframes ddogi {
  from{
    transform: translatey(0px);
  }
  to{
    transform: translatey(325px);
  }
}


.top-title .btn-get-started {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-secondary);
}

.top-title .btn-get-started:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

.top-title .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-weight: 600;
}

.top-title .btn-watch-video i {
  color: var(--color-primary);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.top-title .btn-watch-video:hover {
  color: var(--color-primary);
}

.top-title .btn-watch-video:hover i {
  color: rgba(var(--color-primary-rgb), 0.8);
}

@media (max-width: 640px) {
  .top-title h2 {
    font-size: 32px;
  }

  .top-title p {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .top-title .btn-get-started,
  .top-title .btn-watch-video {
    font-size: 14px;
  }

  .top-title .top-title-motion img { max-width:60%; } 
  .top-title .top-title-motion { height:32vw !important; } 
}


/*--------------------------------------------------------------
# MOTION 
--------------------------------------------------------------*/

.T-motion {
		
	  animation-name:fadeInDownLite; /* 사용할 키프레임 명 */
	  animation-duration:0.5s; /* 재생시간 */
	  animation-delay : 0.4s;  /* 시작지연시간 */
	  animation-timing-function: cubic-bezier(0.5,0.5,0.5,2);/* 진행속도 linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)*/
	  animation-iteration-count: 1;   /*무한반복  infinite; */
	  animation-direction: normal;  /* 재생방향  normal: 정방향 재생, reverse: 역방향 재생, alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작), alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)*/
	  animation-fill-mode: both;  /* 시작전 적용할 CSS*/
		
}


@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}


@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInDownLite {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownLite {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes scale{  /* 확대*/
    to{
        transform: scale(1.5);
    }
}

@-webkit-keyframes translate {/* 이동*/
	form{
		transform: translate(0px);
    }
    to{
		transform: translate(100px);
    }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-title-01{margin-top : 10vw; margin-bottom : 2.2vw;}
.about .about-title-02{margin-bottom : 0.5vw;}
.about .about-title-03{margin-bottom : 2.5vw;}
.about .about-title-04{margin-bottom : 2.5vw;}
.about .about-title-05{margin-bottom : 10vw;}

.about .about-title-01 img{width : 38.5vw;}
.about .about-title-02 img{width : 22.5vw;}
.about .about-title-03 img{width : 27vw;}
.about .about-title-04 img{width : 27vw;}
.about .about-title-05 img{width : 27vw;}


.about .swiper-slide{padding-bottom : 65px;}
.about .swiper-slide img{text-align : center; width : 100%; height : 100%; max-width : 1024px;}

.about .swiper-button-next{color:#fff!important;}
.about .swiper-button-prev{color:#fff!important;}

.about .swiper-pagination{text-align: left;padding-left : 6%;}

.about .about-top-deco{width : 100%;top:0;margin: 0 auto;text-align : center;}
.about .about-top-deco img{top:0;width : 100%;}
.about .about-bottom-deco{width : 100%;bottom:0;margin: 0 auto;text-align : center;}
.about .about-bottom-deco img{bottom:0;width : 100%;}



.about {

  width: 100%;
  /*min-height: 50vh;*/
  position: relative;
  padding: 0px;
  background:#FCE4C5 url("/images/fontpage/about-cont-deco.svg") center -15.99vw / 93.33vw 100vw no-repeat;

}



@media (max-width: 575px) {
}


@media (max-width: 768px) {

}

@media (max-width: 575px) {

  
}



@media (max-width:1199px){
	
}
@media (max-width:1440px){
	
}


/*--------------------------------------------------------------
# slide-box Section
--------------------------------------------------------------*/
.slide-box {width: 100%;position: relative;}

.slide-box .slide_title_01 {margin-top:3vw;margin-bottom:1.3vw;}
.slide-box .slide_title_02 {margin-bottom:1vw;}
.slide-box .slide_title_03 {margin-bottom:1vw;}
.slide-box .slide_title_04 {margin-bottom:1vw;}

.slide-box .slide_cont_01 {font-size : 1.8vw; line-height : 2.2vw; margin-bottom:1.8vw; color:#ffe1d2;}
.slide-box .slide_cont_02 {font-size : 1.8vw; line-height : 2.2vw; margin-bottom:1.8vw; color:#ffe1d2;}
.slide-box .slide_cont_03 {font-size : 1.8vw; line-height : 2.2vw; margin-bottom:1.8vw; color:#ffe1d2;}
.slide-box .slide_cont_04 {font-size : 1.8vw; line-height : 2.2vw; margin-bottom:1.8vw; color:#ffe1d2;}

.slide-box .swiper-slide{padding-bottom : 3vw;}
.slide-box .swiper-slide img{text-align : center; width : 100%; max-width : 1024px;max-height :614px; }
.slide-box .swiper-slide video{text-align : center; width : 100%; max-width : 1024px;}

.slide-box .swiper-button-next{color:#fff!important;}
.slide-box .swiper-button-prev{color:#fff!important;}

.slide-box .swiper-pagination{bottom:0px; }
	
.slide-box .swiper-pagination-bullet{
	background:rgba(255,255,255,1.5)!important;
	opacity: var(--swiper-pagination-bullet-opacity, 1)!important;
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px)!important;	
}
.slide-box .swiper-pagination-bullet-active{
	width: 12px!important;
	height:12px!important;
	background:rgba(255,255,255,2)!important;	
	opacity: var(--swiper-pagination-bullet-opacity, 1)!important;
}

.slide-box .slide_title_02_bg{background:#fdcba4;}


/*--------------------------------------------------------------
# font test Section
--------------------------------------------------------------*/

.for-a11y{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;zoom:1;text-indent:-999em}
p { word-break:break-all; } 

.ddangs_font .font_testarea{position:relative;width:100%;min-height:410px; background:#fdcba4;overflow:hidden;}
.ddangs_font .font_testarea .font_type{position:relative;display:inline-block;height:1px;}
.ddangs_font .font_testarea .font_type:after{content:'';display:inline-block;width:1px;height:130%;}
.ddangs_font .font_testarea .font_type .font_output{font-family:'Ddangs Font'; position:relative;display:inline-block; width : 80vw; max-width:1200px; max-height:100vw; min-height:410px; padding:30px 0px;color:#987a62;line-height:1.4; white-space:pre-wrap;word-wrap:break-word;overflow:hidden;zoom:1;box-sizing:border-box;outline:0}
.ddangs_font .font_testarea .font_type .font_output .text_bar{position:relative;display:inline-block;vertical-align:text-top;}
.ddangs_font .font_testarea .font_type .font_output .text_bar:after{content:'|';display:inline-block;vertical-align:top;width:1px;line-height:1.4;text-indent:-999em;background:#987a62;
	-webkit-animation-name: cursor;
	animation-name: cursor;
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
@-webkit-keyframes cursor{
	0%{opacity:1.0}
	100%{opacity:0.0}
}
.ddangs_font .font_testarea .font_type .font_output:focus .text_bar{display:none}
.font_option{display:block;margin-top:1vw;left:50%;width:100%;}
.font_option:after{content:'';display:block;clear:both}
.font_option .box_font-weight{position:relative;float:left;font-size:1.5vw;color:#fff;font-weight:800} 
.font_option .box_slider{position:relative;float:left;height:1.5vw;font-size:1.5vw;color:#fff;font-weight:800;}
.font_option .box_slider .box_size-title{position:relative; float : left;}
.font_option .box_slider .box_size-slider{position:relative; margin-left :70px;left:4px;width:20vw;height:0.5vw;border:1px solid #ff6620;box-sizing:border-box;background:transparent; }
.font_option .box_slider .box_size-slider:after{content:'';display:block;margin-top:1.15vw;width:100%;height:2px;background-color:#fff; opacity:0.3;}

.font_option .box_slider .ui-slider-handle{
	position:absolute;top:0;width:6px;height:1vw;margin-top:0.7vw;margin-left:-4px;cursor:default;background-color:#fff;cursor:col-resize;z-index:2;box-sizing:border-box;
	-ms-touch-action:none;
	touch-action:none;
	-webkit-transition: 0.1s ease-out;
	transition:left 0.1s ease-out;
}
.font_option .font_weight .form_label{cursor:pointer; padding-right : 30px;}
.font_option .font_weight input[type=radio]:checked + .form_label{font-weight : bold;color:#9c2900;}
.font_option .font_weight .form_label.form_label-light{left:0%}
.font_option .font_weight .form_label.form_label-medium{left:50%}
.font_option .font_weight .form_label.form_label-bold{left:100%}
.font_option .font_weight .text_weight{}
.font_option .font_weight .form_label-light .text_weight{}
.font_option .font_weight .form_label-medium .text_weight{}
.font_option .font_weight .form_label-bold .text_weight{}


/*  딩벳  마우스업 */
.about-item .dingDiv_BG{width : 100%;max-width : 1024px;max-height : 614px; background:#fff; margin : 0 auto; text-align: center; padding : 3vw 2vw;}
.about-item .dingDiv_Line{clear : both;}
.about-item .dingDiv_Line .img{display:inline-block;width : 8vw;padding :1vw 0.8vw;max-width : 120px;}
.about-item .dingDiv_Line .img img:hover { transform: scale(2);}


/*--------------------------------------------------------------
# download Section
--------------------------------------------------------------*/
.download {
	
  width: 100%;
  /*min-height: 50vh;*/
  position: relative;
  padding: 0px;
  background:#FCE4C5 url("/images/fontpage/download-cont-deco.svg") center 18vw / 100vw 130vw no-repeat;

}

.download .down_title_01 {margin-top:15vw;}
.download .down_title_02 {margin-top:4vw;}

.download .down_cont_00 {margin-top:2vw;}
.download .down_cont_01 {margin-top:2vw;}
.download .down_cont_02 {margin-top:2vw;margin-bottom:5vw;}
.download .down_cont_03 {margin-top:6vw;}

.download .down_title_01 img{width : 38.5vw;}
.download .down_title_02 img{width : 22.5vw;}

.download .down_cont_01 img{width : 52vw;}
.download .down_cont_02 img{width : 52vw;}
.download .down_cont_03 img{width : 70vw;}

.download .download-top-deco{width : 100%;top:0;margin: 0 auto;text-align : center;}
.download .download-top-deco img{top:0;width : 100%;}


/*--------------------------------------------------------------
# On Focus Section
--------------------------------------------------------------*/
.onfocus {
  padding: 0;
}

.onfocus .video-play {
  min-height: 400px;
  background: linear-gradient(rgba(var(--color-black-rgb), 0.4), rgba(var(--color-black-rgb), 0.7)), url("../img/onfocus-video-bg.jpg") center center;
  background-size: cover;
}

.onfocus .content {
  background: linear-gradient(rgba(var(--color-secondary-rgb), 0.5), rgba(var(--color-secondary-rgb), 0.8)), url("../img/onfocus-content-bg.jpg") center center;
  background-size: cover;
  color: rgba(var(--color-white-rgb), 0.8);
  padding: 40px;
}

@media (min-width: 768px) {
  .onfocus .content {
    padding: 80px;
  }
}

.onfocus .content h3 {
  font-weight: 600;
  font-size: 32px;
  color: var(--color-white);
}

.onfocus .content ul {
  list-style: none;
  padding: 0;
}

.onfocus .content ul li {
  padding-bottom: 10px;
}

.onfocus .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--color-primary);
}

.onfocus .content p:last-child {
  margin-bottom: 0;
}

.onfocus .content .read-more {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: -nline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-primary);
}

.onfocus .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.onfocus .content .read-more:hover {
  background: rgba(var(--color-primary-rgb), 0.9);
  padding-right: 19px;
}

.onfocus .content .read-more:hover i {
  margin-left: 10px;
}

.onfocus .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--color-primary) 50%, rgba(var(--color-primary-rgb), 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.onfocus .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(var(--color-primary-rgb), 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.onfocus .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--color-white);
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.onfocus .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--color-white);
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

.onfocus .play-btn:hover:after {
  border-left: 15px solid var(--color-primary);
  transform: scale(20);
}

@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

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


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  color: var(--color-white);
  font-size: 14px;
}

.footer .footer-content {
  background: var(--color-secondary);
  padding: 60px 0 30px 0;
}

.footer .footer-content .footer-info {
  margin-bottom: 30px;
}

.footer .footer-content .footer-info h3 {
  font-size: 28px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.footer .footer-content .footer-info h3 span {
  color: var(--color-primary);
}

.footer .footer-content .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: var(--font-primary);
  color: var(--color-white);
}

.footer .footer-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.footer .footer-content h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  bottom: 0;
  left: 0;
}

.footer .footer-content .footer-links {
  margin-bottom: 30px;
}

.footer .footer-content .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-content .footer-links ul i {
  padding-right: 2px;
  color: var(--color-white);
  font-size: 12px;
  line-height: 1;
}

.footer .footer-content .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-content .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-content .footer-links ul a {
  color: rgba(var(--color-white-rgb), 0.7);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

.footer .footer-content .footer-links ul a:hover {
  color: var(--color-white);
}

.footer .footer-content .footer-newsletter form {
  margin-top: 30px;
  background: var(--color-white);
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
}

.footer .footer-content .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}

.footer .footer-content .footer-newsletter form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-content .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: var(--color-primary);
  color: var(--color-white);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-content .footer-newsletter form input[type=submit]:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
}

.footer .footer-legal {
  padding: 30px 0;
  background: var(--color-secondary-dark);
}

.footer .footer-legal .credits {
  padding-top: 4px;
  font-size: 13px;
  color: var(--color-white);
}

.footer .footer-legal .credits a {
  color: var(--color-primary-light);
}

.footer .footer-legal .social-links a {
  font-size: 18px;
  display: inline-block;
  background: rgba(var(--color-white-rgb), 0.1);
  color: var(--color-white);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .footer-legal .social-links a:hover {
  background: var(--color-primary);
  text-decoration: none;
}



/********************************************************/
/*
/********************************************************/

@media (min-width: 1440px) {

}
@media (max-width: 1439px) {
		

}



@media (min-width: 1200px) {

}
@media (max-width: 1199px) {
		

}


@media (min-width: 992px) {

}
@media (max-width: 991px) {
	
	#main{font-size : 2.188vw;line-height : 3.88vw;}
	#main h3{font-size : 6.66vw;}
	#main h4{font-size : 3.44vw; font-style:italic;}
	
	.container_title{width : 90vw;}
	
	/* 메인타이틀 */
	.top-title {width: 100%;position: relative;padding-top:12vw;}
	.top-title .top-title-01 img{margin-left : 3vw; width : 48.999vw;max-width : 600px;}	
	.top-title .top-title-motion{height : 34.33vw;}
	.top-title .top-title-motion video{width : 100%;max-width : 1024px;margin-top:-9%;}
	.top-title .top-title-02{margin-bottom : 2.933vw;}
	.top-title .top-title-02 img{width : 72.333vw;max-width : 880px;}
	.top-title .top-title-03{margin-bottom : 2.533vw;}
	.top-title .top-title-03 img{width :33.999vw;max-width : 410px;margin-right : 3vw;}
	.top-title .top-title-04 img{width : 65.999vw;max-width : 780px;}
	
	.top-title-ddogi-motion{position:absolute; top : 10vw; right :-10vw;z-index:99;}
	.top-title-ddogi-motion img{width : 33vw;}
	.top-title-hamgu-motion{position:absolute; left :-10vw; top : 62.66vw;z-index:99;}
	.top-title-hamgu-motion img{width : 22vw;}
	
	/* 땅스체 다운로드 */
	/*
	.f_down {width : 23vw;}
	.f_down img{width : 15vw;}
	.f_down_01 img{width : 9.88vw;}
	*/
	
	/* 땅스부대찌개체 */
	.about {background:#FCE4C5 url("/images/fontpage/about-cont-deco.svg") center -18.99vw / 110vw 120vw no-repeat;}

	.about .about-title-01{margin-top : 10vw; margin-bottom : 2.2vw;}
	.about .about-title-02{margin-bottom : 0.5vw;}
	.about .about-title-03{margin-bottom : 2.5vw;}
	.about .about-title-04{margin-bottom : 2.5vw;}
	.about .about-title-05{margin-bottom : 10vw;}
	
	
	/* 땅스체에 빠지다 */
	.slide-box .slide_title_01 {margin-top:3vw;margin-bottom:1.3vw;}
	.slide-box .slide_title_02 {margin-bottom:1vw;}
	.slide-box .slide_title_03 {margin-bottom:1vw;}
	.slide-box .slide_title_04 {margin-bottom:1vw;}

	.slide-box .slide_cont_01 {font-size : 1.5vw; line-height : 1.8; margin-bottom:1.5vw; color:#ffe1d2;}
	.slide-box .slide_cont_02 {font-size : 1.5vw; line-height : 1.8; margin-bottom:1.5vw; color:#ffe1d2;}
	.slide-box .slide_cont_03 {font-size : 1.5vw; line-height : 1.8; margin-bottom:1.5vw; color:#ffe1d2;}
	.slide-box .slide_cont_04 {font-size : 1.5vw; line-height : 1.8; margin-bottom:1.5vw; color:#ffe1d2;}

	.slide-box .swiper-slide{padding-bottom : 50px;}
	.slide-box .swiper-slide img{text-align : center; width : 90vw;}
	.slide-box .swiper-slide video{text-align : center; width : 90vw;}
		
		
	/*  딩벳  마우스업 */
	.about-item .dingDiv_BG{width : 90vw; background:#fff; margin : 0 auto; text-align: center; padding : 3vw 1vw;}
	.about-item .dingDiv_Line{clear : both;}
	.about-item .dingDiv_Line .img{display:inline-block;width : 10vw;padding :3.53vw;}
	.about-item .dingDiv_Line .img img{max-width : 50px;width : 5vw;}	
	.about-item .dingDiv_Line .img img:hover { transform: scale(2);}

	/*  땅스부대찌개체 다운로드 */

	.download { background:#FCE4C5 url("/images/fontpage/download-cont-deco.svg") center 18vw / 120vw 152vw no-repeat;}

	
}

@media (max-width: 767px) {	

.slide-box .swiper-button-next{display:none;}
.slide-box .swiper-button-prev{display:none;}

.font_option .box_font-weight{font-size:3vw;padding-top:1vw;} 
.font_option .box_slider{display:none;}

.download .down_cont_00 {width : 30vw;}

	
}

@media (max-width: 575px) {
	#main{font-size : 15px;line-height : 20px;}
	#main h3{font-size : 28px;}
	#main h4{font-size : 16px;}

}