html { font-size: 1em; line-height: 1.4;  min-width:360px;  }
html,body { height: 100%;  font-family: 'Pretendard'; font-size:18px; line-height: 100%; letter-spacing: 0.5px;  color:#000; }
body { overflow-x: hidden;  background: #000;}


hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
li { list-style: none; }
audio,canvas,iframe,img,svg,video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
a:hover { text-decoration: none; }
a {text-decoration:none; background-color:transparent; vertical-align:middle; -webkit-text-decoration-skip:objects; color:#000; word-break:break-word}
a:hover, a:active, a:focus {text-decoration:none;}
h1,h2,h3,h4,h5,h6, ul,li,ol, div { margin: 0; padding:0; line-height: 100% !important;  }

em, address {font-style:normal}

.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }
::-moz-selection { background: #e74c3c; color: #fff; text-shadow: none; }
::selection { background: #e74c3c; color: #fff; text-shadow: none; }

.main-bg { background: #e74c3c; }
.main-color { color: #e74c3c; }
.white-color { color: #fff; }
.button { padding: 20px 60px; border-radius: 4px; font-size: 16px; font-weight: bold; display: inline-block; color: #fff; text-shadow: none; outline: none; border: 0; }
.button:hover { cursor: pointer; color: #fff; }
.button.light { padding: 19px 59px; }
.line { width: 80px; height: 2px; margin-top: 15px; }
.button.light { border: 2px solid #eeeeee; }


.padding-large { padding-top: 90px; padding-bottom: 90px; }
.padding-top-large { padding-top: 90px; }
.margin-top-large { margin-top: 90px; }
.margin-bottom-large { margin-bottom: 90px; }
.margin-top-medium { margin-top: 40px; }
.margin-bottom-medium { margin-bottom: 40px; }
.margin-bottom-small { margin-bottom: 25px; }
.margin-right-small { margin-right: 15px; }
.margin-left-small { margin-left: 15px; }
.mat-none { margin-top: 0; }
.mab-none { margin-bottom: 0; }
.mar-none { margin-right: 0; }
.mal-none { margin-left: 0; }
.hidden { display: none !important; visibility: hidden; }


/** main **/
.txt-black{ color:#000; }
.txt-white{ color:#fff; }
.fill  { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }
.neon{ background: linear-gradient(116.7deg, rgba(110, 0, 197, 0.65) 10.5%, rgba(0, 18, 179, 0.325) 26.85%, rgba(255, 199, 0, 0.4875) 58.53%, rgba(228, 1, 56, 0.65) 92.25%);}


.carousel-indicators li  { width: 20px; height:1px; border: none; border-radius: 0;  background: rgba(255, 255, 255, 0.5);  }
.carousel-indicators .active  { width: 20px; height: 2px; background: #e74c3c; }

header {  position: relative;}
header .overlay  { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url(../images/slider-overlay.png) repeat; }

header .carousel,
header .item,
header .active  { height: 100%; }

/*로고*/
header .logo-container  { position: absolute; top: 20px;  left: 20px; z-index: 10; }
header .logo-container a { display: inline-block; height:35px;}
header .logo-container img{height: 100%;}

/*메뉴 펼침*/
.mobilenav {  top: 0; left: 0; z-index: 999; display: none; position: fixed; width: 100%; height: 100%;  padding:30px;  background: rgba(0, 0, 0, 0.9); text-transform: uppercase; }
.mobilenav li  {  text-align: center;   font-size: 20px; color: #fff;  font-weight: 500; width: 100%;  font-family: 'Archivo', sans-serif;}
.mobilenav li:last-child span  { border-bottom: none; }
.mobilenav li:hover  { cursor: pointer; }
.mobilenav li:first-child  { margin-top: 60px; }
.mobilenav .nav-label { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding:25px 0;  display: block; width: 350px; margin: 0 auto; }

/*삼선*/
.menui { background: #FFF; transition: 0.6s ease; transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);  position: absolute; margin-top:9px;  }
.menu-trigger { z-index: 999; position: fixed; display: block;  width: 40px; height: 34px;   margin: 0px; top: 22px; right: 20px;  background: #000; }
.menu-trigger .hamburger{  display: flex;  justify-content: center;  align-items: center;   }
               
.top-menu,.mid-menu,.bottom-menu { width: 20px; height: 2px; background-color: #fff; }
.top-menu { top: 0; }
.mid-menu { top: 6px; }
.bottom-menu { top: 12px; }

.top-animate { background: #fff !important; top: 5px !important; -webkit-transform: rotate(45deg);/* Chrome, Safari, Opera */  transform: rotate(45deg); }
.mid-animate  { opacity: 0; }
.bottom-animate  { background: #fff !important; top: 5px !important; -webkit-transform: rotate(-225deg);/* Chrome, Safari, Opera */  transform: rotate(-225deg); }

@media screen and (min-width: 768px) {
  /*pc*/
  .menu-trigger {  top: 53px; right: 90px;   width:60px; height: 50px; padding:14px;  background: #000;  } /*삼선 박스*/
  .top-menu,.mid-menu,.bottom-menu { width: 30px;  }
  .top-menu { top: 5px; }
  .mid-menu { top: 15px; }
  .bottom-menu { top: 25px; }

  .mobilenav li  {  font-size: 30px;}
  .mobilenav .nav-label { padding:40px 0;   width: 450px;}
  }

/**/
.visual-in-caption { position: absolute; right: 5%; bottom: 20px; left: 5%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center;   }
.visual-in-caption  { top: 35%; }
.visual-in-caption .vs-text { font-size:62px;  font-weight: 900;  text-transform: uppercase;   font-family: 'Archivo', sans-serif; }
 
.container     { height: auto;  margin: 0 auto;  padding:0 20px;  }
.container .h1 {font-family: 'Archivo', sans-serif;  font-size:55px; font-weight: 900 !important;  line-height: 100%; margin:0 0 20px 0 !important; letter-spacing: -3px; }
.container .h2 {font-family: 'Archivo', sans-serif;  font-size:35px; font-weight: 900 !important;  line-height: 100%;  margin:0 0 20px 0 !important; padding:0; }


.strip {   padding: 30px; text-transform: uppercase; }
@media (max-width: 700px) {
.strip  { padding: 20px; font-size: 40px; }
}

.strip span  { display: inline-block; transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1); transform: translate(20%, 100%); position: relative; z-index: 1; letter-spacing: -0.03em; text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.1); }
.strip  span:before  { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 100%;
                       transform: translateY(-40%); transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1); }
.strip  span.row  { overflow: hidden; line-height: 0.9; display: block; transform: none; }
.strip  span.row:before { display: none; }
.strip .animate  { transform: translate(0, 0); }
.strip .animate:before  { transform: translateY(100%); }


/*01 m*/
.about-us {  position: relative;  height: 100vh;   }
.about-us .container  {padding-top:50px; }
.about-us .ani-text-wrap{ }
.about-us .ani-text-wrap li {   font-size:21px ; margin-bottom: 15px;  line-height: 28px !important; letter-spacing: 0;  font-weight: 600;  word-break: keep-all;}


/*02 m*/
.brand{ }
.about-us:after {content: "";  width: 100%;  height: 100%;  background: url("../images/bg-01.jpg")  no-repeat center;  background-size: cover;  position: absolute;  top: 0;  left: 0;  z-index: -1; }
.brand .col-line-show{  }
.brand .col-line-show li{position: relative; height: 180px; } 
.brand .col-line-show li .overlay{ position: relative;  padding:0 30px;  height: 100%;  transition-property: width, background-color;  transition-duration: 2s, 2s;  }
.brand .col-line-show li .overlay::before {content: "";  position: absolute;  top:0; left:0;  width:100%; height: 100%;  background: rgba(0, 0, 0, 0.3);  }
.brand .col-line-show .brand-01 .overlay  {  text-align: left;   }
.brand .col-line-show .brand-02 .overlay  {  text-align: right; }  
.brand .col-line-show .brand-03 .overlay  {text-align: left;  }
.brand .col-line-show .brand-01  { background: url("../images/brand-img-01.png") no-repeat; background-size: cover; }
.brand .col-line-show .brand-02  { background: url("../images/brand-img-02.png") no-repeat; background-size: cover; }
.brand .col-line-show .brand-03  { background: url("../images/brand-img-03.png") no-repeat; background-size: cover; }
.brand .col-line-show .overlay:hover  { width: 100%; background: rgba(231, 76, 60, 0.9);   }

.brand .col-line-show .description{position: absolute; top:0; left:0;  padding:50px 0 0 20px;   }
.brand .col-line-show .description h3 { font-size: 22px; font-weight:300;  color:#fff;   font-family: 'Archivo', sans-serif;  letter-spacing: -0.5px;   }

/*03 m*/
.business  {  color: #fff; }
.business .overlay {  background: rgba(0, 0, 0, 1);}
.business .col-square-show { display: block; }
.business .col-square-show li { width: 100%;  margin-bottom:100px;  position: relative;  }
.business .col-square-show li:last-child{ margin-right: 0;  }
.business .col-square-show li .img-wrap { width:100%;  height:250px !important; display: inline-block;   overflow: hidden; }
.business .col-square-show li .img-wrap img{  width:100%;  max-height: initial;  margin-top: -10%;    }
.business .col-square-show li .text1,
.business .col-square-show li .text2 {display: block;  font-size:25px;  line-height: 30px !important; font-weight: 600;   text-align: center;  word-break: keep-all;  background: #000; padding:10px; }
.business .col-square-show li:nth-child(2) {margin-top:0;}
.business .col-square-show li .text1{position: absolute; top: 220px !important;    left:35px;    }
.business .col-square-show li .text2{position: absolute; top: 220px !important;    right:35px;   }

/*04 m*/
.contact {}
.contact .info-box{  width:100%; margin-bottom: 20px;  }
.contact .info-box li{width:100%;  color:#fff; line-height: 20px !important; font-size:16px;   margin-bottom: 5px;}

.contact .info-box li em{display: block;}

.out-center{  height: 100vh; position: relative;  }
.in-center {position: absolute;left: 50%; top: 50%;  transform: translate(-50%,-50%); width:100%;   }

/*05 m*/
.copyright  {background: #fff;  padding:50px 0; text-align: center; }
.copyright .copyright{   }




@media screen and (max-width: 375px) {
  .brand .col-line-show li{  height: 145px; } 
.brand .col-line-show li .overlay{  padding:0 30px;  }
.brand .col-line-show .description h3 { font-size: 20px;     }


.business .col-square-show li .img-wrap {  height:180px !important; }
.business .col-square-show li .text1{ top: 165px !important;    left:35px;    }
.business .col-square-show li .text2{ top:165px !important;    right:35px;   }
.business .col-square-show li {   margin-bottom:75px !important;  }
.business .col-square-show li .text1,
.business .col-square-show li .text2 {  font-size:20px;  line-height: 26px !important; font-weight: 600;  padding:10px; }

.about-us .ani-text-wrap li {   font-size:19px;  margin-bottom: 15px;  line-height:24px !important; letter-spacing: 0;  }

.contact .info-box{  margin-bottom: 20px;  }
.contact .info-box li{  line-height: 20px !important; font-size:16px;  }
}


@media screen and (min-width: 768px) {
  /*pc*/
header .logo-container  { top: 50px; left: 93px;   height: 40px;}
header .logo-container a { height:64px !important;}


.top-animate { top:12px !important; }
.bottom-animate  { top: 12px !important;  }

.carousel-inner  {  height: 100%;  }

.visual-in-caption  { right: 20%; left: 20%;  top:25%;  }
.visual-in-caption .vs-text { font-size:150px;  font-weight: 900;   }

.container { height: auto;    }
.container .h1 { font-size:95px;  margin-bottom: 30px;  margin-top:100px; }
.container .h2 { font-size:75px;  margin-bottom: 30px; }

.about-us {height: 100vh;  position: relative;  padding-top:100px; }
.about-us .ani-text-wrap{ }
.about-us .ani-text-wrap li {  font-size:33px; margin-bottom: 25px; font-weight:600 !important;}
.about-us .ani-text-wrap .link  { background: linear-gradient(116.7deg, rgba(110, 0, 197, 0.65) 10.5%, rgba(228, 1, 56, 0.65) 92.25%); background-repeat: no-repeat; background-position: bottom left; background-size: 0% 10px; transition: background-size 500ms ease-in-out; font-weight: var(--fw-bold); }
.about-us .ani-text-wrap .link:hover  {  color: inherit; }
.about-us .ani-text-wrap .link:nth-child(1):hover  {background-size: 96.3% 3px;}
.about-us .ani-text-wrap .link:nth-child(2):hover  {background-size: 76.5% 3px;}
.about-us .ani-text-wrap .link:nth-child(3):hover  {background-size: 95.4% 3px;}

.brand{   }
.brand .col-line-show li{  height: 260px; } 
.brand .col-line-show h3 { font-size: 28px; font-weight: 200;   }
.brand .col-line-show li:nth-child(1) {width:92%; float: right; }
.brand .col-line-show li:nth-child(2) {width:92%; float: left;  }
.brand .col-line-show li:nth-child(3) {width:92%; float: right; }

.brand .col-line-show .description{ width: 100%;   padding:80px 20px 0 20px;   }
.brand .col-line-show .description h3 {  font-size:30px;  }


.business .col-square-show { display: flex; }
.business .col-square-show li { width: calc(100% / 2);  margin-right: 80px;  position: relative;  }
.business .col-square-show li:last-child{ margin-right: 0;  }
.business .col-square-show li .img-wrap { width:100%;  height: 550px !important;   display: inline-block; overflow: hidden;  }
.business .col-square-show li .img-wrap img{ width:100%; height: 100%;  max-height: initial;  margin-top: 0%;}
.business .col-square-show li .text1,
.business .col-square-show li .text2 { display: block; font-size:35px;  font-weight: 600;  line-height:42px !important; padding:20px; }

.business .col-square-show li:nth-child(2) {margin-top:200px;}
.business .col-square-show li .text1{position: absolute; top: 520px !important;    left:45px;    }
.business .col-square-show li .text2{position: absolute; top: -85px !important;    right:45px;   }

.contact .info-box{  margin-bottom: 20px;  }
.contact .info-box li{  line-height: 26px !important; font-size:20px; margin-bottom:8px; }

.contact .map{ margin:20px 0 30px 0;    }
.contact .mapsize  { height: 500px !important; }

}



@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}


/* General button style (reset) */
.button { padding: 20px 60px; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; 
         -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border: 3px solid #fff; color: #fff; overflow: hidden; }
.button:after  {  content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border: 3px solid #fff; color: #fff; width: 100%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.button:hover,
.button:active  { color: #e74c3c; }
.button:hover:after { height: 260%; opacity: 1; }
.button:active:after  { height: 400%; opacity: 1; }



.back-to-top {  position: fixed; right: 20px; bottom: 20px; z-index: 100; background: #e74c3c; cursor: pointer; width: 40px; height: 40px; line-height: 60px; text-align: center; border-radius: 4px; color: #fff; display: flex; justify-content: center; align-items: center;
  -webkit-animation: pulse 1s linear 0s infinite alternate;
  -moz-animation: pulse 1s linear 0s infinite alternate;
  -o-animation: pulse 1s linear 0s infinite alternate;
  animation: pulse 1s linear 0s infinite alternate;
}

.gg-arrow-up  { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs,1)); width: 22px; height: 22px}
.gg-arrow-up::after,
.gg-arrow-up::before { content: ""; display: block; box-sizing: border-box; position: absolute; top: 4px}
.gg-arrow-up::after  { width: 8px; height: 8px; border-top: 1px solid; border-left: 1px solid; transform: rotate(45deg); left: 7px}
.gg-arrow-up::before { width: 1px; height: 16px; left: 10px; background: currentColor}


@media screen and (min-width: 768px) {
  /*pc*/
  .back-to-top {  width: 50px; height: 50px;}

}


@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
  }
}
@-moz-keyframes pulse {
  from {
    -moz-transform: scale3d(1, 1, 1);
  }
  to {
    -moz-transform: scale3d(1.2, 1.2, 1.2);
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.2, 1.2, 1.2);
  }
}