/*
  Theme Name: Triangle
  Theme Uri: https://designscrazed.org/
  Author: Allie
  Author Uri: https://designscrazed.org/
  Description: Creative Site Template
  Version: 1.1
  */

@font-face {
  font-family: "MyKoreanFont";
  src: url("https://hktechco.com/fonts/NotoSansKR.ttf") format("truetype");
  unicode-range: U+AC00-D7AF; /* 한글 음절 영역 */
  font-weight: 100 900; /* VariableFont이면 이렇게 범위 지정 */
  font-style: normal;
}
@font-face {
  font-family: "MyEnglishFont";
  src: url("https://hktechco.com/fonts/Inter.ttf") format("truetype");
  unicode-range: U+0000-024F;      /* 라틴 문자 */
  font-weight: 100 900;
  font-style: normal;
}
body {
  font-family:
    "MyKoreanFont",     /* 한글 */
    "MyEnglishFont",    /* 영어 */
    sans-serif !important;       /* 마지막 fallback */
    letter-spacing: 0px !important;
    overflow-x: hidden;
}
/***NEW****/
.bold {
  font-weight: 500;
  color: #231f20;
}

:root {
  --main-color: #21aac1;
  --section3-bg: #f0f0f0;
  --text-gray: #737577;
}

input::placeholder {
  font-size: 15px;
}

.ko-only {
  letter-spacing: -0.05em;
}

/*********************animation************************/

.motion.active {
  transition-duration: .6s;
}

.motion2 {
  opacity: 0;
}

.motion2.active {
  opacity: 1 !important;
  transition-duration: .6s;
}

.motion3 {
  opacity: 0;
}

.motion3.active {
  opacity: 1 !important;
  transition-duration: .6s;
}

.opacity1 {
  opacity: 1!important;
}

@keyframes fade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

.wrap123 {
  width: 100%;
  overflow: hidden;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  height: 16px;
  display: grid;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c:no-repeat linear-gradient(var(--main-color) 0 0);
  background: var(--c), var(--c), var(--c);
  animation: l16-1 5s infinite linear, l16-2 5s infinite linear;
  transform: scale(var(--s,1)) translate(3px,-3px);
}
.loader:after {
  --s:-1;
}
@keyframes l16-1 {
  0%,
  3%    {background-size: 0    1px,1px 0   ,0    1px}
  16.67%{background-size: 100% 1px,1px 0   ,0    1px}
  33.33%{background-size: 100% 1px,1px 100%,0    1px}
  46%,
  54%   {background-size: 100% 1px,1px 100%,100% 1px}
  66.67%{background-size: 0    1px,1px 100%,100% 1px}
  83.33%{background-size: 0    1px,1px 0   ,100% 1px}
  96%,
  100%  {background-size: 0    1px,1px 0   ,0    1px}
}
@keyframes l16-2 {
  0%,49.9%{background-position: 0    0,100% 0   ,100% 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%}
}

/*header animation*/

@keyframes headerDefault {
  from {transform: translateY(-80px);}
  to {transform: translateY(0px);}
}
  
@keyframes headerUp {
  from {transform: translateY(0px);}
  50% {transform: translateY(-80px);}
  to {transform: translateY(-20px);}
}
@keyframes headerDown {
  from {transform: translateY(-20px);}
  50% {transform: translateY(-80px);}
  to {transform: translateY(0px);}
}
#header.default {
  animation : headerDefault .8s ease-in-out;
  animation-fill-mode: forwards;
}
#header.scrolled {
  animation : headerDown 1.5s ease-in-out;
  animation-fill-mode: forwards;
}
#header.awake {
  animation : headerUp 1.5s ease-in-out;
  animation-fill-mode: forwards;
}


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




#pro01 img:hover {
  transform: scale(1.15, 1.15);
  transition-duration: .4s;
}

#pro02 img:hover {
  transform: scale(1.15, 1.15);
  transition-duration: .4s;
}

#pro03 img:hover {
  transform: scale(1.15, 1.15);
  transition-duration: .4s;
}

#pro04 img:hover {
  transform: scale(1.15, 1.15);
  transition-duration: .4s;
}

#pro01 img:not(:hover) {
  transform: scale(1.0, 1.0);
  transition-duration: .4s;
}

#pro02 img:not(:hover) {
  transform: scale(1.0, 1.0);
  transition-duration: .4s;
}

#pro03 img:not(:hover) {
  transform: scale(1.0, 1.0);
  transition-duration: .4s;
}

#pro04 img:not(:hover) {
  transform: scale(1.0, 1.0);
  transition-duration: .4s;
}


  #video {
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    width: 100%;
    overflow: hidden;
   }


  body {
    background: #ffffff;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    line-height: 22px;
    color: #000;
  }

  html {
    height: 100%;
  }


  a:hover {
    outline: none;
    text-decoration:none;
    color:#4ea4ee;
  }

  a:focus {
    outline:none;
    outline-offset: 0;
  }

  p {
    letter-spacing: -0.3px;
  }


  ul {
    list-style: none;
  }

  .fa:hover {
    color: #2AA7DC;
  }

  .overflow{
    overflow: hidden;
  }

  .uppercase{
    text-transform: uppercase;
  }

  .btn-common {
    font-size: 14px;
    color: #0099ae;
    border: 1px solid #0099ae;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding: 10px 25px;
  }

  #action .col-sm-5{
    position: absolute;

    top: 0;
    height: 100%;
    right: 0;
  }


  .btn-common:hover, 
  .btn-common:focus{
    outline: none;
    background: none;
    box-shadow: none;
    color: #01707f;
    border-color:#01707f;
  }

  .align-right{
    text-align: right;
  }

  .inline{
    display: inline-block;
  }

  .padding{
    padding: 65px 0;
  }

  .padding-bottom{
    padding-bottom: 65px;
  }

  .padding-top{
    padding-top: 90px;
  }

  .padding-right{
    padding-right: 80px;
  }

  .padding-left{
    padding-left: 80px;
  }

  .margin-bottom{
    margin-bottom: 35px;
  }

     .carousel-indicators.visible-xs {
      height: 20px;
      margin: 0;
      padding: 0;
      position: absolute;
      top: -35px;
      width: 100%;
      left: 0;
    }

  .carousel-indicators.visible-xs li {
    border-color: #D29948;
    border-width: 2px;
    height: 12px;
    margin: 0 5px 0 0;
    width: 12px;
  }

  .carousel-indicators.visible-xs li.active {
    background: rgba(210, 153, 72, 0.7);
  }


/*************************
*******Header******
**************************/

.lang-select button .fa {
  position: relative;
  left: 1px;
}

.container {
  width: 87%!important;
}

.openBig {
  width: 43px!important;
  top: 76px!important;
  left: 99px!important;
  transition-duration: .6s;

}

.openSmall {
  width: 17px!important;
  transition-duration: .6s;
}

.openBig3 {
  left: calc(100% - 143px)!important;
  transition-duration: .6s;
}

.openSmall3 {
  left: calc(100% - 260px)!important;
  transition-duration: .6s;
}

.margintop17 {
  margin-top: 17px;
  transition-duration: .6s;
}

.openLG {
  height: 25px!important;
  border: 1px solid #ddd;
  transition-duration: .6s;
  background-color: #fff;
}

.closeLG {
  height: 0px!important;
  border: none;
  transition-duration: .6s;
  background-color: rgba(0, 0, 0, 0)!important;
}


.lang-select {
  z-index: 1000;
  position: absolute;
  top: 12px;
  left: calc(100% - 260px);
  letter-spacing: 3px;
}

.lang-select button {
  position: relative;
  left: 40px;
  border: 1px solid #aaa;
  width: 100px;
  height: 25px;
  font-size: 13px;
  outline: none;
  letter-spacing: 3px;
  color: white;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  line-height: 20px;
  padding-right: 1.5px;
  transition-duration: .3s;
}

.lang-select ul li {
  transition-duration: .2s;
  border-top: 0;
  width: 100px;
  height: 0px;
  line-height: 24px;
  background: #fff;
  list-style: none;
  overflow: hidden;
}

.lang-select ul li a {
  text-align: center;
  font-size: 13px;
  display: block;
  text-decoration: none;
  color: #555!important;
  padding-right: 12px;
}

.lang-select img {
  position: relative;
  top: -1px;
  left: -2px;
  width: 17px;
}

.lang-select ul li:nth-child(2) img {
  left: -1px!important;
}


.lang-select ul li:nth-child(3) img {
  left: -2px!important;
}


.cm_hd {
  width: 100%;
  display: block;
  height: 0px;
  overflow: hidden;
  padding-bottom: 23%;
}

.cm_hd img {
  position: relative;
  animation: cmhd 120s infinite;
  width: 100vw;
}



@keyframes cmhd {

  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }

}



.cm_wrap2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0px;
  background: #d6d6d6;
  top: 55%;
  left: 50%;

}

.cm_wrap2.active::after {
  height: 100px;
  transition-duration: 2.5s;
}

.cm_wrap2::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 0%;
  height: 1px;
  background: #d6d6d6;
  top: 95px;
}

.cm_wrap2.active::before {
  width: 100%;
  transition-duration: 3.5s;
  transition-delay: .4s;
}






.cm_tit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 43px;
  font-weight: 400;
  color: #333;
  text-align: center;
  padding: 55px 0 195px;
}

.cm_tit p {
  background-color: #fff;
  padding: 26px 27px 30px 27px;
  border: 3px solid #d6d6d6;
}

.cm_wrap2.active {
  position: relative;
  height: 250px;
  transition-duration: 1.2s!important;
  transition-delay: .3s;
  opacity: 1!important;
}

.cm_wrap2 {
  position: relative;
  height: 250px;
  opacity: 0!important;
}




#header{
  position: fixed;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.3);
  transition-duration: 0.5s;
}

#header .navbar-inverse .container{
  position: relative;
}



.field-toggle{
  position: relative;
  top: 30px;
  right: 15px;
  display: none;
  height: 50px;
}

.search-form{
  padding-left: 10px;
  height: 40px;
  font-size: 18px;
  color: #818285;
  font-weight: 300;
  outline: none;
  border: 1px solid #459dff;
  margin-top: 20px;
  border-radius: 4px;
}

.social-icons {
  position: relative;
  height: 40px;
}

.social-icons ul li{
  margin-top: 15px;
  padding: 0 10px;

}

.social-icons ul li:last-child{
  padding-right: 0;

}

.social-icons ul li a{
  font-size: 18px;
  color: #d3d3d3;
  padding: 0;
}

.social-icons ul li a:hover .fa-facebook {
  color:#0884d5;
}

.social-icons ul li a:hover .fa-twitter {
  color:#2AA7DC;
}

.social-icons ul li a:hover .fa-google-plus {
  color:#A22523;
}

.social-icons ul li a:hover .fa-dribbble {
  color:#E94989;
}

.social-icons ul li a:hover .fa-linkedin {
  color:#006DC0;
}

.social-icons ul li a:hover,
.social-icons ul li a:focus{  
  background: none;
}

#header .navbar {
  background: transparent !important;
  border: 0;
  margin-bottom: 0;
  padding-top: 18px;
}

#header .navbar-toggle{
  margin-top: 20px;
}

#navbar-brand{
  padding: 0;
  margin-left: 0px;
}

#navbar-brand h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  transition-duration: 0.5s;
}

#navbar-brand img {
  margin-top: 20px;
  width: 200px;
  transform: translateY(-4px);
  transition-duration: 0.5s;
}

#header .navbar-nav.navbar-right >li a {
  color: #ffffff;
  font-size: 17px;
  padding: 26px 33px;
  font-weight: 400;
}

#header .navbar-nav.navbar-right >li a i {
  padding-left: 10px;
}

#header .navbar-inverse .navbar-nav  li.active > a,  
#header .navbar-inverse .navbar-nav  li.active > a:focus, 
#header .navbar-nav.navbar-right li > a:hover,
.navbar-inverse .navbar-nav > .open > a {
  background-color: inherit;
  border: 0;
  color: var(--main-color);
}

#header .navbar-inverse .navbar-nav  li a:hover{
  font-weight: 400;
  color: var(--main-color);
}


/*  Dropdown menu*/

ul.sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#header .navbar-nav li ul.sub-menu li a{
  position: relative;
  color: #6e6e6e;
  font-weight: 400;
  padding: 12px 10px 12px 0;
  font-size: 14px;
  display: block;
  text-transform: capitalize;
  word-spacing: -2px;
  font-weight: 300!important;
  line-height: 20px;
}

#header .navbar-nav li ul.sub-menu li .active{
  background: var(--main-color);
  color: #fff;
  position: relative;
}

#header .navbar-nav li ul.sub-menu li .active i{
  position: absolute;
  font-size: 56px;
  top: -13px;
  color: #818285;
}

#header .navbar-nav li ul.sub-menu li .active .fa-angle-right{
  left: -3px;
}

#header .navbar-nav li ul.sub-menu li .active .fa-angle-left{
  right: -3px;
}

#header .navbar-nav li ul.sub-menu li a:hover,
#header .navbar-nav li ul.sub-menu li a:focus{
  background: var(--main-color);
  color: #fff;
}
#header .navbar-nav li ul.sub-menu li a + ul {
  display: none;
  position: absolute;
  top: -18px!important;
  left: 250px!important;
  background: #fff;
  padding: 16px 0;
  width: 240px;
  z-index: 999;
  box-shadow: 1px 1px 5px #888888;
}
#header .navbar-nav li ul.sub-menu li:hover a + ul {
  display: block;
  -webkit-animation: fadeInUp 400ms;
  animation: fadeInUp 400ms;
}
#header .navbar-nav li ul.sub-menu li a + ul li {
  color: #818285;
  font-size: 14px;
  text-transform: capitalize;
  word-spacing: -2px;
  width: 240px;
  font-weight: 300!important;
  line-height: 20px;
}
  #header .navbar-nav li ul.sub2-menu li a + ul:hover {
  display: block;
  -webkit-animation: fadeInUp 400ms;
  animation: fadeInUp 400ms;
}
#header .navbar-nav li ul.sub-menu li a + ul li:hover {
  color: #ffffff;
  background-color: var(--main-color);
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

/************content*************/

.bggray {
  background-color: rgba(0, 0, 0, 0.8)!important;
  transition-duration: 1s;
}

.bgwhite {
  background-color: rgba(0, 0, 0, 0.3)!important;
  transition-duration: 1s;
}

/*****************************footer***************************/

.section5 #footer {
  position: absolute;
  width: 100%;
  top: 100%;
  transform: translateY(-70%);
  opacity: 0;
  transition-duration: .5s;
}
.section5.active #footer {
  transition-delay: .3s;
  opacity: 1;
  transform: translateY(-100%);
}

/*footer-top*/
.footer-top {
  width: 100%;
  height: 50px;
  background-color: #343434;
  text-align: center;
}
.footer-top p {
  color: #828487;
  font-size: 15px;
  line-height: 50px;
  font-weight: 300;
}

/*footer-content*/
.footer-content {
  display: flex;
  height: 320px;
  background-color: #272727;
  justify-content: center;
  height: fit-content;
  padding: 73.5px 0;
}
.footer-content img {
  padding-right: 30px;
  width: 246px;
  height: 34px;
  margin-top: 6px;
}
.footer-content .content-right {
  position: relative;
  padding-left: 30px;
  border-left: 1px solid #a3a5a8;
  height: fit-content;
}
.footer-content .content-text:nth-of-type(1) {
  margin-bottom: 30px;
}
.footer-content svg {
  position: absolute;
}
.content-right .content-text:nth-of-type(1) svg {
  transform: translate(120px, -22px);
}
.content-right .content-text:nth-of-type(2) svg {
  transform: translate(185px, -22px);
}
.footer-content .content-text h1 {
  font-size: 17px;
  color: #ffffff;
  font-weight: 300;
  margin: 3px 0 5px 0;
}
.footer-content .content-text p {
  font-size: 14px;
  color: #a3a5a8;
  font-weight: 200;
}

/*footer-bottom*/
.footer-bottom {
  width: 100%;
  height: 50px;
  background-color: #141414;
  text-align: center;
}
.footer-bottom p, a {
  font-size: 13px;
  color: #606060;
  font-weight: 200;
  line-height: 50px;
}
.footer-bottom a:hover {
  color: #cccccc;
  cursor: pointer;
}

/********************************footer2***************************/

.ft2top{
  text-align: center;
  width:100%;
  height: 80px;
  background-color: #444444;
  overflow: hidden;
}

.ft2top.active p{
  transition-duration: .6s;
  transform: translateY(0);
}

.ft2top p{
  padding-top:30px;
  font-family: 'Montserrat', sans-serif;
  font-size:15px;
  vertical-align: middle;
  color:#888888;
  letter-spacing: 3px;
  transform: translateY(50%);
}

.ft2wrap p {
  color: white;
}

.ft2wrap h1 {
  padding: 0px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: white;
}

.ft2wrap {
  height: 565px;
  width: 100%;
  background-color: #272727;
  overflow: hidden;
}

.allwrap {
  position: relative;
  height: 490px;
  width:100%;
  overflow: hidden;
}

.ft2wrap .allwrap .wrap1.active {
  transform: translateY(-114px);
  transition-duration: .6s;
  opacity: 1!important;

}

.ft2wrap .allwrap .wrap1 {
  position: absolute;
  left: calc(50% - 523px);
  top: 50%;
  margin-bottom: 3px;
  opacity: 0!important;
}

.allwrap .wrap1 .w1t1 {
  position: absolute;
  top: -82px;
  left: 60px;
}

.allwrap .wrap1 .w1t1 img {
  width: 148px;
}

.allwrap .wrap1 .w1t2 {
  margin-bottom: 26px;
  color: #fff;
}


.allwrap .wrap1 p {
  font-size: 14px;
  color: #6d6d6d;
}

.allwrap .wrap1 .w1t3 {
  margin-bottom: 25px;
}

.allwrap .wrap1 .w1t3 p:first-child {
  font-size: 16px;
  color: #d1d1d1;
}

.allwrap .wrap1 .w1t4 p:first-child {
  font-size: 16px;
  color: #d1d1d1;
}

.ft2wrap .allwrap .wrap2.active {
  transform: translate(-28%, -36%);
  transition-duration: .6s;
  opacity: 1!important;
}

.ft2wrap .allwrap .wrap2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-28%, -16%);
  width: 475px;
  height: 263px;
  padding: 0 40px;
  border-left: 1px solid #555657;
  border-right: 1px solid #555657;
  opacity: 0!important;
}

.allwrap .wrap2 .w2t1 {
  position: absolute;
  left: 43px;
  color: #fff;
}

.allwrap .wrap2 .w2t2 {
  position: absolute;
  left: 172px;
}

.allwrap .wrap2 .w2t3 {
  position: absolute;
  left: 320px;
  top: 48px
}

.allwrap .wrap2 p {
  line-height: 27px;
  color: #6d6d6d;
  font-size: 14px;
}

.allwrap .wrap2 h1 {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 29px;
  margin-top: 3px!important;
  margin-bottom: 24px!important;
}




.ft2wrap .allwrap .wrap3.active {
  transform: translate(315%, -43%);
  transition-duration: .6s;
  opacity: 1!important;
}

.ft2wrap .allwrap .wrap3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(315%, -23%);
  opacity: 0!important;
}

.allwrap .wrap3 .w3t1 {
  margin-left: -4px;
}

.allwrap .wrap3 .w3t1 h1 {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: #337ab7;
}

.allwrap .wrap3 .nav {
  position: relative;
  margin-top: 36px;
}

.allwrap .wrap3 .nav>li>a {
  padding: 10px 12px!important;
}

.allwrap .wrap3 .w3t3 {
  margin-top: 25px;
}

.allwrap .wrap3 .w3t3 img {
  width: 40px;
  margin-left: 11px;
  margin-top: 11px;
}







.ftblack {
  width: 100%;
  height: 75px;
  background-color: #111111;
}

.ftblack .cp-rt {
  position: relative;
  text-align: center;
  width:400px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #47484a;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*****SideHeader*****/
.category {
  font-size: 14px;
  color: #a1a3a6;
  font-weight: 200;
  width: fit-content;
  position: relative;
  left: 50%;
  transform: translateX(-530px);
  margin: 50px 0 200px;
}

#SideHeader {
  position: relative;
  background-image: url(https://hktechco.com/images/SidePage/header.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;
  width: 100%;
  height: 374px;
}
#SideHeader .textWrapper {
  color: #7c7c7c;
  position: absolute;
  text-align: right;
  left: 60%;
  top: 57%;
  width: fit-content;
  transform: translate(-74%, -50%);
  opacity: 0;
  transition-duration: .6s;
}
#SideHeader .textWrapper.active {
  transition-delay: .3s;
  opacity: 1;
  transform: translate(-69%, -50%);
}
#SideHeader .textWrapper h1 {
  font-size: 27px;
  margin-top: 0px;
  font-weight: 300;
}
#SideHeader .textWrapper p {
  font-size: 15px;
  margin-top: 8px;
  font-weight: 300;
}
#SideHeader img {
  position: absolute;
  width: 200px;
  height: auto;
  top: 57%;
  left: 60%;
  transform: translate(85%, -52%);
  opacity: 0;
  transition-duration: .6s;
}
#SideHeader img.active {
  transition-delay: .3s;
  opacity: 1;
  transform: translate(70%, -52%);
  transition-duration: .6s;
}

/*****SideFooter*****/

#SideFooter {
  width: 100%;
  position: relative;
  height: 748px;
  padding-top: 170px;
  opacity: 0;
  transition-duration: .6s;
}
#SideFooter.active {
  transition-delay: .3s;
  opacity: 1;
}
#SideFooter img:nth-child(1) {
  position: absolute;
  height: 578px;
  display: block;
  z-index: 2;
}
#SideFooter img:nth-child(2) {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-100%, -100%);
}
#SideFooter p {
  text-align: center;
  position: relative;
  top: 43%;
  z-index: 3;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: 2.5px;
  color: #a3a5a8;
}


/******************media******************/
/********************992PX~***********************************/
@media (min-width: 992px) {



.black-back img {
  position: absolute;
  top: 0.3%!important;
  left: 100%!important;
  width: 40px;
  z-index: 15;
  cursor:pointer;
}

.navbar .container {
  width: 100%!important;
  min-width: 880px;
  max-width: 1000px;
}

#partvideo01 {
  overflow: hidden;
}




}

/**********************************768px~991px************************************/

@media screen and (min-width: 768px) and (max-width: 991px) {
  
#navbar-brand h1 img {
  transform: translateY(-16px);
}

ul.sub-menu {
	top: 50px!important;
}



#header .navbar-nav.navbar-right .sub-menu li a {
  padding: 3px 10px!important;
}

#header .navbar-nav.navbar-right li > a {
  padding: 20px 7px!important;
}

.mainText01 {
  font-size: 3.4vw;
}

.mainText02 {
  font-size: 8.84vw;
}

.mainText03 {
  font-size: 1.9vw;
}

.product {
  width: 37vw;
}

.product-con {
  margin-left: -12vw;
}

.section3 .wrap1 {
  left: 50%;
  width: 87vw;
  height: 51vw;
}

.section3 .part1 {
  margin: 0.5vw;
  width: 28vw;
  height: 21vw;
}

.section3 .wrap1 p:first-child {
  font-size: 22px;
}

.section3 .wrap1 p:nth-child(2) {
  font-size: 11px;
  margin-right: 10px;
  margin-top: 8px;
}

.sec04mt01 {
  left: 9%;
}

.sec04mt01 h1 {
  font-size: 38px;
}

.sec04mt01 p {
  font-size: 13px;
}

.sec04mt01 img {
  top: -97%;
  left: 102%;
  width: 30%;
}

.sec05form h1 {
  font-size: 6vw;
}

.sec05form p {
  font-size: 1.5vw;
}

.sec05textcon {
  width: 746px!important;
  height: 83px!important
}

.headImg {
  width: 80px;
  height: 80px;
}

.sec05ft1 {
  margin-left: 10px;
  margin-top: -2px;
}

.ft01 {
  font-size: 16px;
}

.ft02 {
  font-size: 12px;
}

.ft03 {
  font-size: 12px;
}

.ft04 {
  font-size: 12px;
}

.factImg {
  width: 80px;
  height: 80px;
  margin-left: 15px;
}

.copyright {
  transform: translate(-97%, -50%);
}

.sec04text strong {
  font-size: 3.2vw;
  letter-spacing: -2px;
}

.sec04text span {
  font-size: 1.4vw;
}

.navbar-right {
  float: right!important;
  margin-right: 78px!important;
}

#header .navbar-nav.navbar-right >li a {
  font-size: 15px;
}


.navbar .container {
  width: 111%!important;
  min-width: 810px;
}

.openBig {
  top: 70px!important;
}

}

@media (min-width: 768px) {

@keyframes awake {

  from {transform: translateY(0px);}
  50% {transform: translateY(-150px);}
  to {transform: translateY(-44px);}
}

}


/****************************************~767px**************************************/

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

@keyframes awake {

  from {transform: translateY(0px);}
  50% {transform: translateY(-150px);}
  to {transform: translateY(-47px);}
}


.lang-select ul li:nth-child(2) img {
  left: -1px!important;
}

.wrap123 .wrap1 {
  width: 92%!important;
  transform: translateX(-50%)!important;
  left: 50%!important;
}

.wrap123 .wrap1 h1 {
  font-size: 20px;
  letter-spacing: -1px!important;
}

.wrap123 .wrap1 p {
  font-size: 15px!important;
  line-height: 28px!important;
  letter-spacing: -1px!important;
  word-break: keep-all;
}

.sub-menu {
  width: 100%;
}

.cm_wrap2 {
  height: 200px!important;
}

.cm_wrap2.active {
  height: 200px!important;
}

.cm_hd {
  padding-bottom: 265px!important;
}

.cm_hd img {
  left: -45%!important;
  width: 1100px!important;
}

/**header**/

#header .navbar-toggle {
  border-radius: 0px!important;
}

.openBig {
  top: 52px!important;
  left: 101px!important;
  width: 33px!important;
}


#header .navbar-nav li ul.sub-menu li a {
  color: #f2f2f2;
}

.container {
  margin-top: -12px;
  width: 100%!important;
  margin-right: 7px!important;
  margin-left: 0px!important;
}

.navbar-toggle {
  padding: 6px 8px;
}

#header {
  padding-bottom: 0px;
}

#header .fa {
  font-size: 15px;
}

.dots li a {
  padding: 14px;
  width: 6px;
  height: 6px;
}

.dots li a:before {
  width: 6px;
  height: 6px;
}

.dots li a.active:before {
  left: 16.4px;
  width: 1px;
  height: 18px;
}

.cm_tit {
  font-size: 4.5vw!important;
  padding: 66px 0 195px!important;
}

.cm_tit p {
  padding: 17px 30px!important;
  border: 2px solid #d6d6d6!important;
  white-space:nowrap;
}

.cm_wrap2.active::after {
  height: 67px;
}

.cm_wrap2::after {
  top: 63%;
}

.lang-select button .fa {
  position: relative;
  top: 9.3px;
  left: 2px!important;
}



/**section1**/

.mainText01 {
  font-size: 3.8vw;
  }

.mainText02 {
  font-size: 9vw;
  letter-spacing: -0.7vw;
  margin-top: 3vw;
  margin-left: -0.5vw;
}

.mainText03 {
  font-size: 14px;
  margin-top: 4vw;
  letter-spacing: -1px;
  line-height: 1.7!important;
  }

.sec-div1 {
    left: 10%;
    width: 80%;
}

/**section2**/

.section2 {
  background-size: 30%!important;
  background-position-y: 25%;
}

.product-con {
  position: absolute;
  top: 20%!important;
  left: 6%!important;
  width: 90%!important;
  height: 90%!important;
}

.product {
  width: 47vw!important;
  height: 57vw!important;
  margin: -2.5vw!important;
  text-align: center!important;
}

.product p {
  margin-left: 5px!important;
}

.product img {
  width: 47vw!important;
  margin-left: 13px!important;
}

.product-name {
  font-size: 15px!important;
  margin-left: 0px!important;
  text-align: center;
  margin-bottom: 8vw!important;
}

.product p:nth-child(2) {
  font-size: 2.2vw!important;
}

.product p:nth-child(3) {
  font-size: 4.4vw!important;
  letter-spacing: -2px!important;
}

.product p:nth-child(4) {
  font-size: 2vw!important;
  letter-spacing: -0.5px!important;
}

.car {
  display: none!important;
}



/**section3**/

.section3 .wrap1 {
  width: 85%;
  height: 61%;
  margin-left: 0.8%;
}


.section3 .wrap1 p:first-child {
  font-size:15px;
}

.section3 .wrap1 p:nth-child(2) {
  font-size: 10px;
  margin-right: 31px;
}

.wrap1 a {
  font-size: 12px;
  padding: 1px 6px!important;
}

.section3 .part1 {
  margin: 4px;
  width: 40vw;
  height: 26vw;
  float: left;
}

.section3 .part1 img {
  position: relative;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 70px;
  cursor:pointer;
}

.descrpit {
  top: 99.5%!important;
  transform: translate(-50%, 0%)!important;
  width: 100%!important;
  font-size: 15px!important;
  line-height: 26px!important;
  letter-spacing: -1px!important;
  height: auto!important;
  left: 50%;
  padding: 6px 29px;
}


/**section4**/

.contentWrap{
  top: 72%;
  width: 80%;
}

.sec04text01 {
  width: 38%;
}

.sec04text02 {
  width: 32%;
}

.sec04text03 {
  width: 38%;
}

.sec04text04 {
  width: 32%;
}

.sec04text strong {
  font-size: 22px;
  letter-spacing: -1px;
}

.sec04text span {
  font-size: 12px;
  letter-spacing: -1px;
}

.sec04text {
  height: 90px;
}


.sec04wrap img {
  position: absolute;
  width: 25px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
}

.sec04wrap01 img {
  width: 27px;
  margin-top: 6px;
}

.sec04wrap01 span {
  margin-top: 4%;
}

.sec04wrap02 span {
  margin-top: 5%;
}

.sec04wrap03 span {
  margin-top: 2%;
}

.sec04wrap04 span {
  margin-top: 4.5%;
}

.line01 {
  width: 10%;
  height: 100px;
}

.liner01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 2px;
  background-color: #927164;
}

.line02 {
  width: 10%;
  height: 100px;
}

.liner02 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 2px;
  background-color: #927164;
}

#line99 {
  display:block; 
}

.sec04mt01 {
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 89%;
}

.sec04mt01 h1 {
  font-size: 5.5vw;
  font-weight: 600;
  letter-spacing: -2px;
}

.sec04mt01 p {
  margin-top: 2.7vh;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: -1px;
  word-break: keep-all;

}

.sec04mt01 img {
  top: -170%;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
}


/**section5**/

.sec05form {
  top: 24%;
  width:76%;
  left: 12%
}

.sec05form h1 {
  font-size: 6vw;
}

.sec05form p {
  font-size: 15px;
}

.sec05form button {
  width: 38vw;
  font-size: 15px;
  height: 5.5vh;
  line-height: 0.3vh;
  margin-top: 3vh;
}

::-webkit-input-placeholder {
  font-size: 2.9vw;
}

.sec05form form input {
  margin: 3vw 0;
}

.sec05part2 {
  height: 285px;
  z-index: 15;
}

.sec05textcon {
  width: 100%;
  left: 54%;
  top: 38%;
}

.headImg{
  display: none;
}

.factImg {
  display: none;
}

.sec05ft1 {
  margin-left: 0px;
  margin-top: 0px;
}

.sec05ft2 {
  width: 89%;
  margin-left: 0px;
  margin-top: 13px;
  display: block;
}

.ft01 {
  font-size: 21px;
}

.ft02 {
  font-size: 16px;
  margin-left: 2px;
}

.ft03 {
  font-size: 16px;
  margin-left: 2px;
}

.ft04 {
  font-size: 15px;
  margin-left: 2px;
}

.fa {
  font-size: 14px;
  position: relative;
  left:50%;
  transform: translate(-50%, 10px);
}

.ft-bt {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 13;
  transform: translate(-50%, -50%);
}

.ft-down {
  animation-name: ftdown;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
}

.ft-up {
  animation-name: ftup;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
}

@keyframes ftdown {

  from {margin-top: -280px;}
  to {margin-top: 0px;}
}

@keyframes ftup {
  
  from {margin-top: 0px;}
  to {margin-top: -280px;}
}

.copyright {
  transform: translate(-86%, -50%);
  top: 139%;
  left: 100%;
  font-size: 10px;
}

.sec05textcon p {
  margin-top: 2px;
}

.opc0 {
  opacity: 0;
  transition-duration: .5s;
}

.opc1 {
  opacity: 1;
  transition-duration: .5s;
}

.ftup1 {
  animation-name: ftup1;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

.ftdown1 {
  animation-name: ftdown1;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}


@keyframes ftup1 {
  0% {
    top: 16%;
  }
  100% {
    top: 0%;
  }
}

@keyframes ftdown1 {
  0% {
    top: 0%;
  }
  100% {
    top: 16%;
  }
}

#partvideo01 {
  width: 100%!important;
  height: 56vw!important;
}

.lang-select {
  left: calc(0% + 72px);
}

.openBig2 {
  left: calc(100% - 262px)!important;
  transition-duration: .6s;
}

.openSmall2 {
  left: calc(0% + 72px)!important;
  transition-duration: .6s;
}



}

/************************~1100px**********************/

@media (max-width: 1100px) {


.ft2wrap {
  height: 685px!important;
}

.allwrap {
  height: 610px!important;
}

.ft2wrap .allwrap .wrap1.active {
  transform: translateY(-236px)!important;
  text-align: center!important;
}

.ft2wrap .allwrap .wrap1 {
  width: 288px!important;
  left: calc(50% - 151px)!important;
  top: 54%!important;

}

.allwrap .wrap1 .w1t1 {
  top: -53px!important;
  left: 95px!important;
}

.allwrap .wrap1 .w1t1 img {
  width: 110px!important;
}

.ft2wrap .allwrap .wrap2 {
  display: none!important;
}

.ft2wrap .allwrap .wrap3.active {
  transform: translate(-49%, -41%)!important;
}

.ft2wrap .allwrap .wrap3 {
  text-align: center!important;
  transform: translate(-48%, -1%)!important;
  top: 76%!important;
  width: 250px!important;
}

.allwrap .wrap3 .w3t1 {
  margin-left: 0px!important;
}

.allwrap .wrap3 .w3t2 {
  position: relative;
  left: 50%;
  transform: translateX(-24%);
}

.allwrap .wrap3 .nav {
  margin-top: 6px!important;
}

.ft2top p {
  font-size: 12px!important;
  letter-spacing: 1px;
}


.ftblack .cp-rt {
  font-size: 11px!important;
  letter-spacing: 1px;
}

.allwrap .wrap3 .w3t3 {
  margin-top: 0px!important;
  margin-right: 18px;
}





}

/**** Responsive CSS Code ****/
/* 0~767 768~1279 1280~1980*/

/** 0~768 **/
@media (max-width: 768px) {
  
}
/** 768~1280 **/
@media (min-width: 768px) and (max-width: 1279px) {
    .category {
        transform: translateX(-365px);
    }
}