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

#greeting {}
#greeting .topImg{ position:relative; width:100%; height:450px; background:url("../images/greeting/bg_topImg.jpg"); background-size:100% !important; background-repeat: no-repeat; background-position: top center; margin-top:100px; background-attachment: fixed;}
#greeting .topImg:before { width:100%; height:100%; content:''; position:absolute; top:0; left:0;  background-color:rgba(0,0,0,.3);  }
#greeting .topImg .text { position:absolute; bottom:50px; left:70px;  color:transparent;  -webkit-text-stroke: .01em #fff; font-size:2.2em; font-weight: 800; line-height: 1.5em; text-transform: uppercase; font-family: 'Poppins', 'Noto Sans KR', sans-serif; letter-spacing:-0.04em}
/**
#greeting .topImg .text span { position: relative; display:inline-block; color:#fff; -webkit-text-stroke: none; font-size:1.5em; font-weight: 700;   clip: rect(0, 900px, 0, 0); animation: glitch 3s infinite alternate-reverse;  animation-delay: 2s; margin-left:25px;} 
**/
#greeting .topImg .text span { position: relative; display:inline-block; color:#fff; -webkit-text-stroke: none; font-size:1.5em; font-weight: 700; margin-left:25px;} 
#greeting .topImg .ceo { position:absolute; bottom:0; right:3vw;}
#greeting .topImg .ceo img { width:500px;}
/**
#greeting .topImg .text span:last-child:after {
  content: "Technologies";
  position: absolute;
  left: 2px;
  top: 2px;
  clip: rect(0, 900px, 0, 0);
  color: white;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 4s;
}
#greeting .topImg .text span:last-child:before {
  content: "Technologies";
  position: absolute;
  left: -2px;
  top: -2px;
  clip: rect(0, 900px, 0, 0);
  color: white;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 4s;
}
**/
#greeting .headTxt { font-size:2.2em; color:#202020; font-weight:500; letter-spacing: -0.06em}
#greeting .headTxt span { color: var(--thm-primary); display: inline-block}

#greeting .col-md-6:nth-of-type(1) .innerTxt{ padding-right:2vw}
#greeting .col-md-6:nth-of-type(2) .innerTxt{ padding-left:2vw}
#greeting .col-md-6 .innerTxt p { text-align: justify;  line-height: 1.8em; color:#202020}

#greeting .col-md-6 .signature { display: flex;  justify-content: flex-end; align-items: center}
#greeting .col-md-6 .signature .coNceo { color:#202020; font-size:1.1em}
#greeting .col-md-6 .signature .coNceo .co_name{ display: inline-block}
#greeting .col-md-6 .signature .coNceo .ceo_name{ display: inline-block; margin-left:20px; font-weight: 600; letter-spacing: .5em}
#greeting .col-md-6 .signature  .sign {margin:0 5px 0 30px;}
#greeting .col-md-6 .signature  .sign img{ width:130px;}

@keyframes fadeWhite {
  100% {
    color: white;
  }
}
@keyframes glitch {
  0% {
    clip: rect(20px, 9999px, 73px, 0);
  }
  5% {
    clip: rect(34px, 9999px, 2px, 0);
  }
  10% {
    clip: rect(91px, 9999px, 88px, 0);
  }
  15% {
    clip: rect(90px, 9999px, 15px, 0);
  }
  20% {
    clip: rect(83px, 9999px, 40px, 0);
  }
  25% {
    clip: rect(69px, 9999px, 16px, 0);
  }
  30% {
    clip: rect(5px, 9999px, 8px, 0);
  }
  35% {
    clip: rect(58px, 9999px, 74px, 0);
  }
  40% {
    clip: rect(77px, 9999px, 4px, 0);
  }
  45% {
    clip: rect(88px, 9999px, 6px, 0);
  }
  50% {
    clip: rect(70px, 9999px, 88px, 0);
  }
  55% {
    clip: rect(64px, 9999px, 54px, 0);
  }
  60% {
    clip: rect(56px, 9999px, 55px, 0);
  }
  65% {
    clip: rect(15px, 9999px, 10px, 0);
  }
  70% {
    clip: rect(39px, 9999px, 62px, 0);
  }
  75% {
    clip: rect(19px, 9999px, 9px, 0);
  }
  80% {
    clip: rect(37px, 9999px, 25px, 0);
  }
  85% {
    clip: rect(87px, 9999px, 63px, 0);
  }
  90% {
    clip: rect(33px, 9999px, 100px, 0);
  }
  95% {
    clip: rect(93px, 9999px, 96px, 0);
  }
  100% {
    clip: rect(19px, 9999px, 30px, 0);
  }
}

/*가로 1024 이상 가로모드*/
@media  (min-width: 1024px) and  (max-width: 1919px) and (orientation: landscape) {
    #greeting .topImg { margin-top:80px; background-size: cover !important}
    #greeting .topImg .ceo  { right:0}
    #greeting .topImg .ceo img { width:400px}
    #greeting .topImg .text { left:5vw; bottom:40px}
}


/* 패드 등 세로모드*/
@media  (min-height: 1024px)  and (max-height: 1919px) and (orientation: portrait) {
    #greeting .col-md-6 .signature { justify-content:space-around}
    #greeting .col-md-6 .signature .coNceo .ceo_name { display: block; margin-left:0;}
    #greeting .col-md-6 .signature .sign { margin:0}
    #greeting .col-md-6 .signature .sign img { max-width:15vw;}
}


@media (max-width: 991px) {
    #greeting .topImg{ height:200px; margin-top:50px; background-size: cover !important}
    #greeting .topImg .text { bottom:10px; left:30px;  font-size:1.3em; line-height: 1.5em;}
    #greeting .topImg .ceo { right:10px}
    #greeting .topImg .ceo img { width:216px; max-width:40vw;}
    #greeting .headTxt { font-size:1.8em;}
    #greeting .col-md-6 .signature .coNceo .co_name { display: block; margin-left:0}
}


@media (max-width: 767px) {
    #greeting .topImg{ height:200px; margin-top:50px; background-size: cover !important}
    #greeting .topImg .text { bottom:10px; left:20px;  font-size:1em; line-height: 1.5em;}
    #greeting .topImg .text span { display:block; margin:0;  font-size:1.33em;} 
    #greeting .topImg .ceo { right:-50px}
    #greeting .topImg .ceo img { width:216px; max-width:60vw;}
    #greeting .headTxt { font-size:1.25em;}
    #greeting .headTxt span:before { content:''; display: block}
    #greeting .row.mt-80 { margin-top:20px !important;}
    #greeting .col-md-6:nth-of-type(1) .innerTxt{ padding-right:0}
    #greeting .col-md-6:nth-of-type(2) .innerTxt{ padding-left:0}
    #greeting .col-md-6 .innerTxt p {font-size:.9em; line-height: 1.7em;}
    #greeting .col-md-6 .signature { justify-content: space-between}
    #greeting .col-md-6 .signature .coNceo { font-size:.9em}
    #greeting .col-md-6 .signature .coNceo .ceo_name { display: block; margin:0}
    #greeting .col-md-6 .signature .sign { margin:0 5vw 0 0}
    #greeting .col-md-6 .signature .sign img { width:100px}
}