:root {
  /*scroll-behavior: smooth;*/
}



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

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

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/

div.character-box{background:#fff url("/images/character/ddang-bg.svg") center -180px no-repeat;background-size :1870px auto;}

.container{max-width : 1440px!important;padding : 0px 50px!important;}
.up-bg{position:absolute; top:139px;}

.ddang-animated { width: 100%;  position: relative;  padding: 200px 0px 70px 0px;}
.ddang-animated h2 { margin: 0 0 10px 0; font-size: 48px; font-weight: 300; color: var(--color-secondary); font-family: var(--font-secondary);}
.ddang-animated h2 span { color: var(--color-primary);}
.ddang-animated p { color: rgba(var(--color-secondary-rgb), 0.8); margin: 0 0 30px 0; font-size: 20px; font-weight: 400;}

.ddang-animated .animated1 { animation-name: ddogi;  animation-duration:2.1s;  animation-timing-function:ease-in-out;  animation-iteration-count:infinite;  animation-direction:alternate-reverse;  animation-fill-mode: both;}
@-webkit-keyframes ddogi { from{transform: translatey(-95px);} to{transform: translatey(25px);}}
.ddang-animated .animated2 {margin-left: -50px;	margin-bottom: 180px;animation-name: hamgu;animation-duration:2.5s;	animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate-reverse;animation-fill-mode: both;}
@-webkit-keyframes hamgu { from{transform: translatey(-110px);} to{transform: translatey(0px);}}

/*
.ddagu {position : fixed; top : 62%; right : 1.875rem;animation: up-down 2s infinite alternate-reverse both;z-index:10;}
*/
.ddagu { position:absolute; left:0px; top:0px; animation: up-down 2s infinite alternate-reverse both;z-index:10;}
.ddagu img { width:8.125rem; } 


@media (min-width: 1200px) {
	.ddang-animated .animated1 {max-width: 52%;}
	.ddang-animated .animated2 {max-width: 52%;}
}
@media (max-width: 1199px) {
		
	div.character-box{background:#fff url("/images/character/ddang-bg.svg") center -230px no-repeat;background-size : 1850px auto;}
	.up-bg{position:absolute; top:140px;}
	/*
	.ddagu{ top : 40%; right:5%;} 
	*/

	img.main-top-tag{max-width : 350px;}
	
  	.ddang-animated .animated1 {max-width: 55%;}
	@-webkit-keyframes ddogi {
	  from{
		transform: translatey(-45px);
	  }
	  to{
		transform: translatey(40px);
	  }
	}
	.ddang-animated .animated2 {max-width: 55%;	margin-bottom: 0px;}
	
	@-webkit-keyframes hamgu {
	  from{
		transform: translatey(-125px);
	  }
	  to{
		transform: translatey(-40px);
	  }
	}
}


@media (min-width: 992px) {
	.ddang-animated .animated1 {max-width: 53%;}
	.ddang-animated .animated2 {max-width: 53%;}
}
@media (max-width: 991px) {
	
	div.character-box{background:#fff url("/images/character/ddang-bg.svg") center -230px no-repeat;background-size : 1680px auto;}
	.up-bg{position:absolute; top:108px;}
	/*
	.ddagu{ top :37%; right:5%;} 
	*/
	img.main-top-tag{max-width : 300px;}
	h2{padding:0px; margin:0px;}
	
	.ddang-animated .animated1 {max-width: 53%;}	
		@-webkit-keyframes ddogi {
		  from{
			transform: translatey(-45px);
		  }
		  to{
			transform: translatey(20px);
		  }
		}
	.ddang-animated .animated2 {max-width: 53%;}  
		@-webkit-keyframes hamgu {
		  from{
			transform: translatey(-110px);
		  }
		  to{
			transform: translatey(-40px);
		  }
		}
	
}

@media (max-width: 767px) {	

	div.character-box{background:#fff url("/images/character/ddang-bg.svg") left top no-repeat;background-size : 1950px auto;}
	.up-bg{position:absolute;top:756px;left : 0%;}
	/*
	.ddagu {top :10%;right:3%;}	
	*/
  	img.main-top-tag{max-width : 400px;}
	
	.ddang-animated .animated1 {max-width: 53%;}	
		@-webkit-keyframes ddogi {
		  from{
			transform: translatey(90px);
		  }
		  to{
			transform: translatey(10px);
		  }
		}
	.ddang-animated .animated2 {max-width: 53%;}  
		@-webkit-keyframes hamgu {
		  from{
			transform: translatey(0px);
		  }
		  to{
			transform: translatey(-110px);
		  }
		}
		
}

@media (max-width: 575px) {
	
	.container{padding : 0px 20px!important;}
	
	.ddang-animated {padding: 100px 0px 70px 0px;}
	
	div.character-box{background:#fff url("/images/character/ddang-bg.svg") left -400px no-repeat;background-size : 2230px auto;}
	.up-bg{position:absolute; top:82.5%;margin : 0px auto;}	
	.up-bg img{width : 100%;height : 100%;}	
	/*
	.ddagu{top:50px;}
	*/
	/*
	.ddagu img{width : 120px;}
	*/
	img.main-top-tag{width : 200px;}
		
	.ddang-animated .animated1 {max-width: 53%;}	
		@-webkit-keyframes ddogi {
		  from{
			transform: translatey(60px);
		  }
		  to{
			transform: translatey(10px);
		  }
		}
	.ddang-animated .animated2 {max-width: 53%;}  
		@-webkit-keyframes hamgu {
		  from{
			transform: translatey(20px);
		  }
		  to{
			transform: translatey(-50px);
		  }
		}
	.Hamgu-545{margin-top:50px;}
	.col-xs-4{float : left; width : 33.3%;}
	.col-xs-6{float : left; width : 50%;}
	 

	}
	
@media (max-width: 575px) {
	
	div.character-box{background:#fff url("/images/character/ddang-bg.svg") left -400px no-repeat;background-size : 2030px auto;}
	
	}

.ddang-animated .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);
}

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

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

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

.ddang-animated .btn-watch-video:hover {
  color: var(--color-primary);
}

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

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

  .ddang-animated p {
    font-size: 18px;
    margin-bottom: 30px;
  }

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

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

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

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

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

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

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

.about .swiper-button-next{color:#d16870!important;}
.about .swiper-button-prev{color:#d16870!important;}
.about .swiper-pagination{margin-left : 2%; text-align: left; bottom:0px; }

.about .swiper-pagination-bullet{
	width: 34px!important;
    height:34px!important;
    display: inline-block;   
	
	background-color:transparent;
	background-image:url("/images/character/slide-num-n.svg");
	background-position: center center;
	background-repeat : no-repeat;		
	background-size: cover;
	
    opacity:1!important;	
} 
.about .swiper-pagination-bullet-active{
	width: 34px!important;
    height:34px!important;
    display: inline-block;    
	
	
	background-color:transparent;
	background-image:url("/images/character/slide-num-a.svg");
	background-position: center center;
	background-repeat : no-repeat;		
	background-size: cover;
		
    opacity:1!important;
}



.about .animated1 {
	float : left;
    margin-bottom: 0px;
	animation: up-down 2s ease-in-out infinite alternate-reverse both;
	width : 50%;
}

.about .animated2 {
	float : left;
	margin-left: 0px;  
	margin-top: 140px;  
	animation: up-down 1.4s ease-in-out infinite alternate-reverse both;
	width : 50%;
}
.about .icon{margin : 0px auto; width : 100%; max-width : 1240px;}
.about .icon .img { border-radius: 8px; /* overflow: hidden;*/}
.about .icon .img img { transition: 0.4s;}
.about .icon .img img:hover { transform: scale(1.7);}


.about .btn img { transition: 0.4s;}
.about .btn img:hover { transform: scale(1.2);border : none;}


.about {
	
  width: 100%;
  /*min-height: 50vh;*/
  position: relative;
  padding: 50px 0px 50px 0px;

}

.about .about-img {
  position: relative;
  margin: 60px 0 0 60px;
}

.about .about-img:before {
  position: absolute;
  inset: -60px 0 0 -60px;
  z-index: -1;
  content: "";
  background: url("/images/character/about-bg.png") top left;
  background-repeat: no-repeat;
}

@media (max-width: 575px) {
  .about .about-img {
    margin: 30px 0 0 30px;
  }

  .about .about-img:before {
    inset: -30px 0 0 -30px;
  }
}

.about h3 {
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-weight: 300;
  font-size: 32px;
  /* margin-bottom: 20px;*/
}


@media (max-width: 768px) {
	.about .swiper-slide{padding-bottom : 60px}
	.about .swiper-pagination-bullet{
		width: 20px!important;
		height:20px!important;
		
		background-image:url("/images/character/slide-num-n.svg");
		background-position: center center;
		background-repeat : no-repeat;		
		background-size: cover;
	}
	.about .swiper-pagination-bullet-active{
		width: 20px!important;
		height:20px!important;
		
		background-image:url("/images/character/slide-num-a.svg");
		background-position: center center;
		background-repeat : no-repeat;		
		background-size: cover;
	}
	
  .about h3 {
    font-size: 28px;
  }
}

.about .nav-pills {
  border-bottom: 1px solid rgba(var(--color-secondary-rgb), 0.2);
}

.about .nav-pills li+li {
  margin-left: 40px;
}

.about .nav-link {
  background: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-secondary);
  padding: 12px 0;
  margin-bottom: -2px;
  border-radius: 0;
  font-family: var(--font-secondary);
}

.about .nav-link.active {
  color: var(--color-primary);
  background: none;
  border-bottom: 3px solid var(--color-primary);
}

@media (max-width: 575px) {
	
  .about .nav-link { font-size: 16px;}
  .about .swiper-slide{padding-bottom : 40px;}  
  
}

.about .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: var(--color-secondary);
}

.about .tab-content i {
  font-size: 22px;
  line-height: 0;
  margin-right: 8px;
  color: var(--color-primary);
}


@media (max-width:1199px){
	.about .swiper-pagination{margin-left : 0%;}
	
	
}
@media (max-width:1355px){
	.about .swiper-pagination{margin-left : 0%;}
	
	
}
@media (max-width:1440px){
	.about .animated1 {
		margin-bottom: 0px;
		animation: up-down 2s ease-in-out infinite alternate-reverse both;
		width :50%;

	}

	.about .animated2 {
		margin-left: 0px;  
		margin-top: 100px;  
		animation: up-down 1.4s ease-in-out infinite alternate-reverse both;
		width : 50%;
	}
}