@charset "utf-8";
/* CSS Document */

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

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Logo
	3.2 Main Navigation
	3.3 Hamburger Menu
	3.4 Full Screen Menu
4. Main Slider
	4.1 Main Slider Dots
	4.2 Main Slider Nav
5. Home Social
6. Features
7. About
	7.1 About Progress Bars
8. Testimonials
	8.1 Testimonials Navigation
9. Services
10. Clients
	10.1 Clients Slider
11. Contact
12. Footer



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

/***********
1. Fonts
***********/
/* @import url("https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"); */
/* @import url("https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"); */
@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,400,600,700,800");
@import url("https://fastly.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
@font-face {
  font-family: Pretendard, "Myriad Pro Regular";
  src: url("../fonts/myriad-pro-regular.ttf") format("truetype"),
    url("../fonts/myriad-pro-regular.otf") format("opentype");
}

/*********************************
2. Body and some general stuff
*********************************/

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Pretendard, "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 2;
  font-weight: 400;
  background: #ffffff;
  color: #6e6e6e;
}
div {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
  list-style: none;
  margin-bottom: 0px;
}
p {
  font-family: Pretendard, "Open Sans", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  color: #6e6e6e;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
p a {
  display: inline;
  position: relative;
  color: inherit;
  border-bottom: solid 1px #ffa07f;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
p a:active {
  position: relative;
  color: #ff6347;
}
p a:hover {
  color: #ffffff;
  background: #ffa07f;
}
p a:hover::after {
  opacity: 0.2;
}
::selection {
  background: #fde0db;
  color: #ff4200;
}
p::selection {
  background: #fde0db;
}
h1 {
  font-size: 72px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 11px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #282828;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
}
::-webkit-input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
:-moz-placeholder /* older Firefox*/ {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
::-moz-placeholder /* Firefox 19+ */ {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
:-ms-input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
::input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
.form-control {
  color: #db5246;
}
section {
  display: block;
  position: relative;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.trans_200 {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.trans_300 {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.trans_400 {
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
.trans_500 {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.fill_height {
  height: 100%;
}
.super_container {
  width: 100%;
  overflow: hidden;
  padding-left: 0px;
  padding-right: 0px;
}
.button {
  width: 187px;
  height: 66px;
  background: #ff4200;
  overflow: hidden;
}
.button a {
  display: block;
  width: 100%;
  color: #ffffff;
  font-size: 17px;
  font-weight: 300;
  line-height: 66px;
  text-transform: uppercase;
  letter-spacing: 2.7px;
  text-align: center
  
}
.button a:hover {
  display: block;
  width: 100%;
  color: #000;
  font-size: 17px;
  font-weight: 300;
  line-height: 66px;
  text-transform: uppercase;
  letter-spacing: 2.7px;
}
.button a img {
  display: inline-block;
  width: 13px !important;
  height: 7px;
  margin-left: 4px;
}
.button a::after {
  display: block;
  position: absolute;
  top: -50%;
  left: -70px;
  width: 60px;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  content: "";
  -webkit-transform: rotate(12.5deg);
  -moz-transform: rotate(12.5deg);
  -ms-transform: rotate(12.5deg);
  -o-transform: rotate(12.5deg);
  transform: rotate(12.5deg);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
  z-index: 0;
}
.button a:hover::after {
  left: calc(100% + 70px);
}
.prlx_parent {
  overflow: hidden;
}
.prlx {
  height: 130% !important;
}
.button_w {
  width: 250px;
}
/*********************************
3. Header
*********************************/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  padding-left: 48px;
  padding-right: 48px;
  z-index: 20;
  background: #ffffff;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

/*********************************
3.1 Logo
*********************************/

/* .logo_container
{
	flex-basis: 50%;
} */
.logo {
  margin-left: 7px;
}
.logo a {
  display: block;
  background-image: url(../images/logo.png);
  background-repeat: no-repeat;
  background-position: center left;
  width: 190px;
  height: 45px;
  line-height: 45px;
  background-size: 80%;
}
.logo span:first-of-type {
  position: absolute;
  top: 0;
  left: -5px;
  color: #ff4200;
  z-index: -1;
}
.logo span:last-of-type {
  color: #ff4200;
}

/*********************************
3.1.1 Last Update
*********************************/
.update_container {
  max-width: 180px;
  width: 100%;
  font-size: 14px;
  display: flex;
  gap: 3%;
  flex-wrap: wrap;
}

@media only screen and (max-width: 575px) {
  .update_container {
    font-size: 12px;
  }
}
/*********************************
3.2 Main Navigation
*********************************/

.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
  text-align: right;
}
.nav_items {
  height: 100%;
}
.nav_items li {
  display: inline-block;
  margin-left: -4px;
  height: 100%;
}

.nav_items li a {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 20px
}

.nav_items li.active {
  background: #ff4200;
}
.nav_items li.active a {
  color: #ffffff;
}
.nav_items li:hover {
  background: #ff4200;
}
.nav_items li:hover a {
  color: #ffffff;
}

.tlog_search {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media all and (max-width: 1580px) {
  .main_nav {
    display: none;
  }

}
/*********************************
3.3 Hamburger Menu
*********************************/

.hamburger_container {
  display: none;
  cursor: pointer;
  padding: 10px;
  margin-right: -10px;
  flex-basis: 50%;
  text-align: right;
}
.hamburger_text {
  display: inline-block;
  margin-right: 7px;
  font-weight: 400;
  color: #171717;
}
.hamburger_icon {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 3px;
  background: #171717;
  margin-bottom: 4px;
}
.hamburger_icon::before,
.hamburger_icon::after {
  display: block;
  position: absolute;
  left: 0;
  width: 22px;
  height: 3px;
  background: #171717;
  content: "";
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.hamburger_icon.active {
  background: transparent;
}
.hamburger_icon.active::before {
  top: -9px;
  transform: translateY(9px) rotate(45deg);
}
.hamburger_icon.active::after {
  top: 9px;
  transform: translateY(-9px) rotate(-45deg);
}
.hamburger_icon::before {
  top: -6px;
}
.hamburger_icon::after {
  top: 6px;
}
.hamburger_container:hover .hamburger_icon::before {
  top: -8px;
}
.hamburger_container:hover .hamburger_icon::after {
  top: 8px;
}
.hamburger_container:hover .hamburger_icon.active::before {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  top: 0;
}
.hamburger_container:hover .hamburger_icon.active::after {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  top: 0;
}
@media all and (max-width: 1580px) {

  .hamburger_container {
    display: block;
  }
}
/*********************************
3.4 Full Screen Menu
*********************************/

.fs_menu_container {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 19;
  -webkit-transition: all 1s 0s cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 1s 0s cubic-bezier(1, 0, 0, 1);
  -ms-transition: all 1s 0s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 1s 0s cubic-bezier(1, 0, 0, 1);
  transition: all 1s 0s cubic-bezier(1, 0, 0, 1);
  padding-left: 48px;
  padding-right: 63px;
  padding-top: 150px;
  text-align: right;
}
.fs_menu_shapes {
  position: absolute;
  bottom: 32px;
  left: -70px;
  width: 25%;
}
.fs_menu_shapes img {
  width: 100%;
}
.fs_menu_container.active {
  top: 0;
}
.fs_menu_list {
  display: inline-block;
}
.fs_menu_list li {
  overflow: hidden;
}
.fs_menu_list li a {
  display: inline-block;
  font-size: 42px;
  font-weight: 700;
  color: #171717;
  line-height: 1.4;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 600ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 600ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 600ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1600ms cubic-bezier(0.19, 1, 0.22, 1);
}
.fs_menu_list li:first-child a {
  transition-delay: 600ms;
}
.fs_menu_list li:nth-child(2) a {
  transition-delay: 670ms;
}
.fs_menu_list li:nth-child(3) a {
  transition-delay: 740ms;
}
.fs_menu_list li:nth-child(4) a {
  transition-delay: 810ms;
}
.fs_menu_list li:nth-child(5) a {
  transition-delay: 880ms;
}
.fs_menu_list li:nth-child(6) a {
  transition-delay: 950ms;
}
.fs_menu_list li:nth-child(7) a {
  transition-delay: 900ms;
}
.fs_menu_list li:nth-child(8) a {
  transition-delay: 950ms;
}
.fs_menu_list li:nth-child(9) a {
  transition-delay: 1000ms;
}
.fs_menu_list li:nth-child(10) a {
  transition-delay: 1050ms;
}
.fs_menu_container.active .fs_menu_list li a {
  transform: none;
}
.fs_menu_list li a span {
  position: relative;
}
.fs_menu_list li a span span {
  position: absolute;
  top: -1px;
  left: -5px;
  color: #ff4200;
  z-index: -1;
}
.fs_menu_list li a > span::after {
  display: block;
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0%;
  height: 3px;
  background: #171717;
  content: "";
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
.fs_menu_list li a:hover span::after {
  width: 100%;
}
.fs_social_container {
  position: absolute;
  bottom: 0px;
  right: 63px;
  width: auto;
  height: 74px;
  z-index: 11;
}
.fs_social li {
  display: inline-block;
  margin-left: 10px;
}
.fs_social li a {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs_social li i {
  font-size: 21px;
  color: rgba(255, 66, 0, 0.6);
}
.fs_social li:hover i {
  color: rgba(255, 66, 0, 1);
}

/*********************************
4. Main Slider
*********************************/
.btn-more a {
  width: 250px;
  height: 66px;
  line-height: 66px;
  background-color: #ff4200;
  color: #fff;
  display: block;
  font-size: 20px;
  text-align: center;
}

.home {
  overflow: hidden;
}
.hero_slider_container {
  width: 100%;
  height: 840px;
  margin-top: 110px;
}
.main_slider_shapes {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 16%;
  max-width: 25%;
  height: auto;
  z-index: 2;
}
.main_slider_item_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.main_slider_content {
  width: 610px;
  height: 100%;
  margin-top: 240px;
}
.main_slider_content h2 {
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
  font-size: 120px;
}
.main_slider_content .tit_line {
  line-height: 100px;
  margin-bottom: 30px;
}
.main_slider_content h2 span {
  color: #ff4200;
}
.main_slider_content h3 {
  color: #fff;
  font-size: 32px;
}
.main_slider_content h2 span {
  font-family: Pretendard, "Myriad Pro Regular", sans-serif;
}
.main_slider_content p {
  font-size: 17px;
  font-weight: 300;
  color: #ffffff;
  padding-left: 5px;
  margin-top: 1px;
  letter-spacing: -0.5px;
}
.discover_button {
  margin-top: 42px;
  margin-left: 5px;
}

/*********************************
4.1 Main Slider Dots
*********************************/

.main_slider_dots {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 74px;
  width: 100%;
  z-index: 11;
}
.main_slider_custom_dots li {
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
  line-height: 74px;
  color: #ffffff;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  margin-right: -4px;
}
.main_slider_custom_dots li.active {
  background: #ff4200;
}
.main_slider_custom_dot.active,
.main_slider_custom_dot:hover {
  background: #ff4200;
}

/*********************************
4.2 Main Slider Nav
*********************************/

.main_slider_nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 11;
  padding: 10px;
  cursor: pointer;
}
.main_slider_nav_left {
  left: 39px;
}
.main_slider_nav_right {
  right: 39px;
}
.main_slider_nav i {
  color: #ffffff;
  font-size: 18px;
}
.main_slider_nav:hover i {
  color: #ff4200;
}

/*********************************
5. Home Social
*********************************/

.home_social_container {
  position: absolute;
  top: 110px;
  right: 0px;
  width: auto;
  height: 74px;
  background: #ff4200;
  z-index: 11;
  padding-right: 38px;
  padding-left: 45px;
}
.home_social li {
  display: inline-block;
  margin-left: 10px;
}
.home_social li a {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.home_social li i {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
.home_social li:hover i {
  color: rgba(255, 255, 255, 1);
}

/*********************************
6. Features
*********************************/

.features_col {
  padding-top: 120px;
  padding-bottom: 120px;
}
.features_col_20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.features_item h3 {
  text-transform: uppercase;
  letter-spacing: 0em;
  margin-bottom: 0px;
  font-size: 24px;
}
.features_item img {
  /*margin-bottom: 35px;*/
}
.features_item p {
  font-weight: 400;
  margin-bottom: 0px;
  margin-top: 23px;
  max-width: 100%;
}

/*********************************
7. About
*********************************/

.about {
  padding-top: 195px;
  padding-bottom: 175px;
}
.about_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.about_shapes {
  position: absolute;
  top: 0;
  left: 0;
}
.section_title h2 {
  display: inline-block;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 116px;
}
.section_title h2 span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50px);
  -moz-transform: translate(-50%, -50px);
  -ms-transform: translate(-50%, -50px);
  -o-transform: translate(-50%, -50px);
  transform: translate(-50%, -50px);
  font-size: 72px;
  font-weight: 900;
  color: #ff0000;
  opacity: 0.32;
}
.section_title h2::before {
  display: block;
  position: absolute;
  bottom: 61px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(calc(-50% - 4px));
  width: 0px;
  height: 45px;
  content: "";
  background: #ffffff;
}
.about_text {
  padding-right: 50px;
}
.about_text p {
  color: #ffffff;
  margin-bottom: 0px;
}
.about_text img {
  /*margin-top: 20px;*/
}

/*********************************
7.1 About Progress Bars
*********************************/

.skills_container {
  padding-top: 10px;
}
.pb_item {
  margin-bottom: 18px;
}
.pb_item h4 {
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.3em;
  margin-top: 18px;
}
.skill_bars {
  height: 3px;
}
.progressbar-text {
  width: 48px;
  font-family: Pretendard, "Open Sans", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-align: right;
}

/*********************************
8. Testimonials
*********************************/

.testimonials {
  padding-top: 195px;
  z-index: 2;
}
.section_title_dark h2 {
  color: #1c1c1c;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 40px;
}
.section_title_dark h2::before {
  background: #ff4200;
}
.testimonials_container {
  width: 100%;
}
.testimonials_container_inner {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: calc(100% - 28px);
  box-shadow: 0 22px 35px rgba(0, 0, 0, 0.28);
}
.testimonials_container_inner::before {
  display: block;
  position: absolute;
  top: 35px;
  left: -35px;
  width: calc(100% + 70px);
  height: calc(100% - 70px);
  content: "";
  background: rgba(242, 244, 249, 0.85);
  z-index: -1;
}
.testimonials_container_inner::after {
  display: block;
  position: absolute;
  top: 70px;
  left: -85px;
  width: calc(100% + 170px);
  height: calc(100% - 140px);
  content: "";
  background: rgba(242, 244, 249, 0.65);
  z-index: -2;
}
.testimonials_slider {
  z-index: 10;
}
.testimonials_item {
  padding-top: 28px;
  background: #ffffff;
}
.testimonials_content {
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
  max-width: 100%;
}
.test_name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #1c1c1c;
  text-transform: uppercase;
}
.test_title {
  font-size: 15px;
  font-weight: 400;
  color: #ff4200;
  margin-top: -5px;
}
.test_quote {
  font-size: 30px;
  line-height: 1;
  color: #ff4200;
  font-style: italic;
  margin-top: 15px;
}
.testimonials_content p {
  max-width: 100%;
}
.testimonials_content img {
  max-width: 100%;
}
.testimonials_content p:first-of-type {
  margin-top: -3px;
}
.test_user_pic {
  position: absolute;
  top: -28px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 94px;
  height: 94px;
}

/*********************************
8.1 Testimonials Navigation
*********************************/

.test_slider_nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 10;
}
.test_slider_nav:hover {
  background: #ff4200;
}
.test_slider_nav:hover i {
  color: #ffffff;
}
.test_slider_nav i {
  font-size: 18px;
  color: #ff4200;
}
.test_slider_nav_left {
  left: -48px;
}
.test_slider_nav_right {
  right: -48px;
}

/*********************************
9. Services
*********************************/

.services {
  padding-top: 152px;
  padding-bottom: 120px;
  z-index: 1;
  margin-top: -32px;
}
.services_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.services_shapes {
  position: absolute;
  top: 116px;
  right: 0;
}
.service_item {
  margin-bottom: 30px;
}
.service_item h3 {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0em;
  margin-bottom: 31px;
  font-size: 24px;
}
.service_item p {
  color: #ffffff;
  max-width: 100%;
}
.icon_container {
  height: 70px;
  width: 70px;
  margin-bottom: 35px;
  background-color: #fff;
  padding: 18px;
  border-radius: 35px;
}

.icon_container_h {
  height: 110px;
  width: 110px;
  margin-bottom: 35px;
  background-color: #ef4823;
  padding: 18px;
  border-radius: 50%;
}

.services_button {
  margin-top: 66px;
  margin-left: auto;
  margin-right: auto;
}

/*********************************
11. Picture Boxes
*********************************/

/*.picture_boxes
{
	padding-top: 132px;
	padding-bottom: 118px;
}*/
.picture_boxes {
  padding-top: 0;
  margin-top: -100px;
  margin-bottom: 150px;
  z-index: 5;
}

.card {
  border: none;
}
.pic_box_title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0em;
  margin-top: 40px;
  margin-bottom: 31px;
  font-size: 24px;
}
.pic_box_link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #ff4200;
  text-transform: uppercase;
  margin-top: 11px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.pic_box_link svg {
  margin-left: 3px;
}
.arrow_poly {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.pic_box_link:hover {
  color: #fd9672;
}
.pic_box_link:hover .arrow_poly {
  fill: #fd9672;
}

/*********************************
10. Clients
*********************************/

.clients {
  padding-top: 192px;
  padding-bottom: 110px;
}

/*********************************
10.1 Clients Slider
*********************************/

.clients_slider {
  margin-top: 87px;
  cursor: pointer;
}
.clients_item {
}
.clients_item img {
  margin: 0 auto;
  -webkit-filter: opacity(50%) grayscale(100%);
  -ms-filter: opacity(30%), grayscale(100%);
  -moz-filter: opacity(30%) grayscale(100%);
  filter: opacity(30%) grayscale(100%);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.clients_item:hover img {
  -webkit-filter: opacity(100%) grayscale(0%);
  filter: opacity(100%) grayscale(0%);
}
/*.owl-carousel .owl-item img {
  width: auto !important;
}*/

/*********************************
11. Contact
*********************************/

.contact {
  padding-top: 192px;
  padding-bottom: 120px;
}
.contact_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.contact_shapes {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(calc(-50% - 40px));
}
.contact_title h2 {
  margin-bottom: 54px;
}
.contact_text p {
  color: #ffffff;
}
.contact_button {
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}

/*********************************
7. Elements Content
*********************************/

.elements_content {
  padding-top: 120px;
  padding-bottom: 120px;
}
.elements_section {
  margin-bottom: 120px;
}
.elements_section:last-child {
  margin-bottom: 0px;
}
.elements_title h2 {
  color: #1c1c1c;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 40px;
}
.elements_title h3 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.elements_content_2 {
  padding-bottom: 0;
  padding-top: 0;
  margin-left: 45px;
  margin-right: 45px;
}

/*********************************
7.5 Elements - Milestones
*********************************/

.milestones_container {
  margin-top: 100px;
}
.milestone {
  width: 33.333%;
}
.milestone_counter {
  font-size: 62px;
  font-weight: 800;
  color: #000;
  line-height: 36px;
  padding-top: 33px;
  text-align: center;
}
.milestone_counter::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 39px;
  height: 2px;
  background: #ff4200;
  content: "";
}
.milestone_text {
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6e6e6e;
  margin-top: 22px;
  text-align: center;
}
.milestone p {
  font-size: 16px;
  font-weight: 300;
  color: #6e6e6e;
  padding-left: 5px;
  margin-top: 1px;
  text-align: center;
}
.icon_container_w {
  height: 120px;
  width: 120px;
  margin-bottom: 35px;
  background-color: #fff;
  padding: 26px;
  border-radius: 50%;
  margin: 0 auto;
}

/*********************************
9. Cards
*********************************/

.zeta_cards {
  width: 100%;
}
.zeta_card {
  padding-top: 208px;
  padding-bottom: 195px;
  padding-left: 134px;
  padding-right: 100px;
}
.zeta_card_content {
}
.zeta_card_content h2 {
  font-size: 24px;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 27px;
}
.zeta_card_content p {
  color: #ffffff;
}
.zeta_card_button {
  margin-top: 46px;
}
.zeta_card_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/*********************************
9. Page Top
*********************************/
.e_tit {
  font-size: 120px;
  font-weight: 600;
}

.sub {
  width: 100%;
  height: 386px;
  margin-top: 110px;
}
.sub_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.services_page_shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  pointer-events: none;
}
.sub_content {
  margin-top: 88px;
}
.sub_content h1 {
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 2px;
}
.sub_content h2 {
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
  font-size: 80px;
}
.sub_content h2 span {
  color: #ff4200;
  font-size: 80px;
}
.sub_content h3 {
  color: #fff;
  font-size: 30px;
}
.sub_content p {
  color: #fff;
  opacity: 0.8;
}
.sub_content span {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1em;
  text-transform: uppercase;
  padding-left: 3px;
}

.sub_social_container {
  position: absolute;
  top: 110px;
  right: 0px;
  width: auto;
  height: 74px;
  background: #ff4200;
  z-index: 11;
  padding-right: 38px;
  padding-left: 45px;
}
.sub_social li {
  display: inline-block;
  margin-left: 10px;
}
.sub_social li a {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.sub_social li i {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.sub_social li:hover i {
  color: rgba(255, 255, 255, 1);
}

/*********************************
12. Footer
*********************************/

.footer {
  background: #111111;
}
.footer_content {
  /*height: 96px;*/
  padding-top: 50px;
  padding-bottom: 50px;
}
.footer_social_container {
  display: inline-block;
}
.footer_social li {
  display: inline-block;
  margin-left: 6px;
}
.footer_social li:first-child {
  margin-left: 0px;
}
.footer_social li a {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.footer_social li i {
  font-size: 14px;
  color: rgba(110, 110, 110, 0.6);
}
.footer_social li:hover i {
  color: rgba(255, 255, 255, 1);
}
.cr p {
  margin-bottom: 0px;
}

.footer_content .media-body a {
  color: #fff;
}

.footer .container .col-sm-9 {
  padding: 0;
}

/* 패밀리 사이트*/
.ft_family_site {
  font-size: 15px;
  margin-left: auto;
  max-width: 200px;
  width: 100%;
  position: relative;
}
.footer_f_site::after {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  background-color: #000;
  bottom: -5px;
}
.ft_family_site > a {
  position: relative;
}
.ft_family_site > ul {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 100%;
  z-index: 1001;
}
.ft_family_site > ul > li {
  background-color: #000;
}
.ft_family_site > ul > li a {
  color: #fff;
}
.ft_family_site a {
  display: block;
  padding: 15px;
  border-bottom: 1px solid #888;
  position: relative;
  color: #fff;
}
.ft_family_site > a::before {
  content: "\e930";
  font-family: "xeicon";
  font-weight: 400;
  color: #fff;
  position: absolute;
  left: 150px;
}


/*퀵메뉴*/
.right_quick-area {
  position: fixed;
  z-index: 18;
  bottom: 120px;
  right: 20px;
}
.right_quick-area .quick-left {
  position: fixed;
  right: 20px;
  opacity: 1;
  border-radius: 8px;
  width: 70px;
  transition: all 0.5s ease;
  bottom: 120px;
}

.right_quick-area li {
  padding: 8px 0;
  position: relative;
}
.right_quick-area li span {
  position: absolute;
  color: #fff;
  border-radius: 30px;
  padding: 4px 0px;
  width: 180px;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  right: 100px;
  top: 20px;
  font-size: 13px;
  display: block;
  opacity: 0;
  transition: all 0.5s ease;
}
.right_quick-area li a,
.right_quick-area li div {
  text-align: center;
  line-height: 70px;
  display: block;
  transition: all 0.3s ease;
  color: #a27b73;
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
}

.right_quick-area li.kakao a {
  background: #fdcd21;
  color: #461b0e;
}
/* .right_quick-area li:nth-child(3) a {
  color: #f90;
} */
.right_quick-area li:hover a,
.right_quick-area li:hover div {
  background: #ff4200;
  color: #fff;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 8px 6px;
}
.right_quick-area li:hover div {
  cursor: pointer;
}
.right_quick-area li:hover span {
  right: 50px;
  opacity: 1;
  display: block;
}
.right_quick-area li a i,
.right_quick-area li div i {
  font-size: 32px;
  margin-top: 20px;
}


@media (max-width: 480px) {
  .right_quick-area {
    display: none;
  }
}

/*퀵메뉴*/
.status_btn_admin select option:checked {
  border: 1px solid #000;
  font-weight: bold;
}

.google_seo h2 {
  font-size: 24px;
  font-weight: bold;
}
.google_seo h3 {
  font-size: 22px;
  font-weight: 500;
  color: #333;
  padding: 20px 0;
}

.latest {
  padding-bottom: 100px;
}

/* 메인 유튜브 */
.player-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 비율 */
  background-color: #000;
  cursor: pointer;
}

.player-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-container .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 14%;
}

.player-container .play-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}

/* 모바일에서 전화걸기 버튼 */

.call_btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 46px;
  border: 1px solid #333;
  text-align: center;
  z-index: 90;
  background: rgba(255, 255, 255, 0.5);
  display: none;
}

.call_btn a {
  display: block;
  color: #333;
  font-size: 20px;
}

.call_btn:hover {
  border-color: #ff4200;
  background: #ff4200;
}

.call_btn:hover a {
  color:#fff
}
@media (max-width: 480px) {
  .call_btn {
      display: block
  }
}