@import url("./NotoSansKR/NotoSansKR.css");
@charset "UTF-8";



/**********************************************************
 * General
 *********************************************************/

* {
    margin: 0;
    padding: 0;
}
/* 모바일 수평 스크롤 금지 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
    background: #fff;
    overflow-x: hidden;
    font-family: 'Noto Sans Korean';
    font-weight: 300;
    width: 100%;
    height: 100%;
}

.container-fluid {
  padding: 0;
}




.buttonVideoPlay {
  display: inline-block;
  width: 80px;
  height: 80px;
	padding: 0;
  border: 2px solid #fff;
  font-size: 26px;
  color: #fff;
  text-align: center;
  line-height: 76px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-bottom: 30px;
  outline: none;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.buttonVideoPlay i {
  padding-left: 4px;
}

.buttonVideoPlay:hover {
  background: #fff;
  color: #25c6da;
  cursor: pointer;
}






.content-section h1 ,
.content-section h1 span {
  font-size: 2.0rem;
  font-weight: 300;
  letter-spacing: -0.05em;
}

.content-section h2 ,
.content-section h2 span {
  font-size: 2.0rem;
  font-weight: 700;
}

.content-section p {
  font-size: 1.0rem;
  font-weight: 300;
  margin: 0;
}

.content-section b {
  color: #6e60b7;
}
.content-section hr {
  display:block;
  margin-bottom: 2vh;
  border:0px;
  height:1px;
  background: url(../images/main/02_bar.png) no-repeat left center;
}
.content-section > span {
  font-size: 1.0rem;
  line-height: 1.0em;
  margin: 10vh 0;
}
.btn_video {
  float:right;
  right: 2vw;
  border-radius: 2rem;
  margin-left: 2vw;
  padding: .5vh 1.5vw;
  font-size: 1.0rem;
  color: #545b62;
  border: 2px #545b62 solid;
  background-color: rgba(0,0,0,0);
}
.btn_video:hover {
  color: white;
  border: 2px white solid;
  background-color: #545b62;
}

.btn_video_white {
  color: white;
  border: 2px white solid;
  background-color: rgba(0,0,0,0);
}
.btn_video_white:hover {
  color: #545b62;
  border: 2px #545b62 solid;
  background-color: white;
}



.owl-carousel {
  z-index: unset;
}



h1.splitting .char ,
h2.splitting .char {
  -webkit-transition: opacity 0.7s linear, -webkit-transform 0.7s cubic-bezier(0.3, 0, 0.3, 1);
  transition: opacity 0.7s linear, -webkit-transform 0.7s cubic-bezier(0.3, 0, 0.3, 1);
  transition: transform 0.7s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.7s linear;
  transition: transform 0.7s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.7s linear, -webkit-transform 0.7s cubic-bezier(0.3, 0, 0.3, 1);
  -webkit-transition-delay: calc(40ms * var(--char-index));
  transition-delay: calc(40ms * var(--char-index));
}

h1.splitting[data-scroll="out"] .char ,
h2.splitting[data-scroll="out"] .char {
  opacity: 0.1;
  -webkit-transform: translateY(1em);
  transform: translateY(1em);
}







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

header .navbar {
  position: fixed;
  top: 0px;
  width: -webkit-fill-available;
  width: 100%;
  min-height: 80px;
  background-color: rgba(0,0,0,255) !important;
  z-index: 2;

  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
}
header.top .navbar {
  top: 0px;
  background-color: rgba(0,0,0,0) !important;
  
  transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
}
header.hideup .navbar {
  top: -100px;
  background-color: rgba(0,0,0,0) !important;
  
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}

.navbar-nav {
  float: right;
}
.navbar-default {
  border: unset;
}
.navbar-nav>li>a {
  font-size: .8rem;
  font-weight: 300;
  padding: .2rem 1rem !important;
  margin: 25px 10px !important;
  color: white !important;
  /* padding: 5px 15px; */

  transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}

.navbar-nav>li>a:hover {
  font-weight: 700;
  border-radius: 30px;
  background-color: white !important;
  color: #000 !important;
}

.container-fluid>.navbar-header {
  margin: 0 1vw;
}

@media (max-width: 768px) {
  .navbar-nav {
    float: unset;
    text-align: center;
  }
}

/* header.hideup #navbar {
  display: none !important;
}
header.top #navbar {
  display: none !important;
}
header #navbar {
  display: block !important;
}
*/
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    display: block !important;
  }
}
#navbar {
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
#navbar.show {
  background-color: rgba(0,0,0,0.7);
  
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}




/*********************************************************
 * Footer
 *********************************************************/

footer {
  color: #fff;
  background: #000;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: -0.4px;
}

footer p {
  margin: 0;
  text-align: left;
}

footer a {
  color: #fff;
}
footer a:hover {
  color: #fff;
  opacity: 0.8;
}

.main .copyright {
  opacity: 0.5;
}











/*********************************************************
 * slide-show
 *********************************************************/

.post-image {
  position: relative;
  overflow: hidden;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: left;
}
.post-image:before {
  content: "";
  display: block;
  padding-top: 80%;
}

.post-image img {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.item {
  margin:0;
  padding:0;
  overflow: hidden;
}
.item .post-image,
.image-section img {
  -webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1); 
	-o-transform:scale(1);  
	transform:scale(1);
	-webkit-transition:.4s;
	-moz-transition:.4s;
	-ms-transition:.4s;
	-o-transition:.4s;
	transition:.4s;
}
.item .post-image:hover,
.item:hover .post-image,
.image-section img:hover {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -ms-transform:scale(1.2);   
  -o-transform:scale(1.2);
  transform:scale(1.2);
}
.post-content {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 1rem;
  color: white;
}
.post-content h1 ,
.post-content h1 span {
  font-size: 1.5rem;
  font-weight: 300;
	margin-bottom: 3vh;
}
.post-content h2 ,
.post-content h2 span {
  font-size: 1.2rem;
  font-weight: 700;
	margin-bottom: 1vh;
}
.post-content hr {
  display: block;
  border: 0px;
  height: 2px;
  margin-left: 15px;
  background: url(../images/main/02_bar_small.png) no-repeat left center;
}
.post-content a {
  position: absolute;
  color: white;
  font-size: 1.0rem;
  font-weight: 300;
  bottom: 5vh;
}
.post-content .arrow-circle-right {
  display: inline-block;
  position: relative;
  top: 4px;
  left: 10px;
  width: 23px;
  height: 23px;
  background: url(../images/main/02_btn_view.png) no-repeat left center;
}

.item:first-child .post-content .arrow-right {
  position: relative;
  float: right;
  width: 55px;
  height: 20px;
  background: url(../images/main/10_arrow.png) no-repeat left center;
}

.owl-nav {
  position: absolute;
  width: 100%;
  top: 40%;
  color: white;
  opacity: 0.1;
}
.owl-nav:hover {
  opacity: 1;
}
.owl-nav .owl-prev {
  position: absolute;
  left: 1vw;
}
.owl-nav .owl-next {
  position: absolute;
  right: 1vw;
}






/*********************************************************
 * Tweets sections
 *********************************************************/

#partners {
  width: 100%;  
  display: inline-block;
  padding: 1rem 0;
  background-color: #343A48;
  background-attachment: fixed;
  background-size: cover;
  color: #FFF;
  margin: 0;
}

#partners .title-section{
  margin: 3vh 0 6vh 0;
}

#partners h1 ,
#partners h1 span {
  font-weight: 100;
}

#partners hr {
  display: block;
  border: 0px;
  height: 2px;
  background: url(../images/main/10_bar.png) no-repeat center center;
}

#partners .owl-carousel {
  margin: 2vh 0;
}

#partners .owl-carousel .item {
  padding: 15px;
  height: 80px;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}


#partners .item>a>img {
  vertical-align: -webkit-baseline-middle;
  width: auto;
}

#partners .owl-nav {
  top: 85%;
  z-index: 1;
}









/*********************************************************
 * contents
 *********************************************************/

.main .head {
   padding-top: 15vh;
   padding-bottom: 5vh;
   margin-bottom: 5vh !important;
   /* height: 615px; */
   background: url(../images/main/01_visual.png) repeat center center;
   color: #FFF;
}

.main .head .content-section>h1 {
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  padding-bottom: 1em;
}

.main .head .content-section>h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.main .head .content-section>p {
  font-size: 1.0rem;
  font-weight: 350;
}




#overview {
  background-color: #F9F9F9;
  color: #242426;
}

#overview h1 ,
#overview h1 span {
  font-size: 1.5rem;
}
#overview .image-section img {
  max-width: 100%;
  min-width: 50%;
}



.image-section {
}

.feature {
  background-color: #F9F9F9;
  color: #242426;
}
.feature .image-section {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
}
.feature .image-section img {
  max-width: 65%;
  min-width: 50%;
}

.feature h1 ,
.feature h1 span{
  font-size: 1.8rem;
}
.feature h2 ,
.feature h2 span{
  font-size: 1.2rem;
}
.feature span{
  font-size: 1.0rem;
}



#feature02  {
  color: white;
  background-color: #4CBAC7;
}
#feature03  {
  color: white;
  background-color: #6776BB;
}
#feature05  {
  color: white;
  background-color: #4CBAC7;
}
#feature06  {
  color: white;
  background-color: #6776BB;
}


#referance {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
}

#referance .post-first{
  color: black;
  margin-left: 1rem;
}
#referance .post-first > h1{
  font-size: 2.4rem;
}



#distribute {
  color: white;
  padding: 2rem;
  background: linear-gradient(90deg, #67B3C1 50%, #353D4A 50%);
}

#distribute h1 ,
#distribute h1 span{
  font-size: 1.8rem;
  font-weight: 300;
  margin: 0 1vw;
  margin-bottom: 3vh;
}
#distribute h2 ,
#distribute h2 span{ 
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 1vw;
}
#distribute p ,
#distribute span {
  font-size: 1.0rem;
  font-weight: 300;
  margin: 1vh 1vw;
  margin-bottom: 3vh;
}

#distribute .top-article{
  margin: 3rem 0;
}

#distribute .center-article{
  min-height: 20em;
  background: url(../images/main/09_visual.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;  
}


#map {
  height: 30vh;
}








/*********************************************************
 * privacy page
 *********************************************************/

.privacy {
  font-weight: 300;
  line-height: 2.3em;
  color: #494949;
  font-size: 1rem;
}
.privacy .head{
  color: white;
  background-color: rgba(0,0,0,0.7);
  padding-top: 10vh;
}
.privacy .head p{
  margin: 0;
}
.privacy .date{
  margin: 10vh 0;
}
.privacy .date p{
  margin: 0;
  font-weight: 500;
}
.privacy h1{
  font-size: 2.0rem;
  font-weight: 500;
}
.privacy h2{
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 5vh;
}
.privacy p{
  font-size: 1rem;
  margin-top: 3vh;
}
.privacy span{
  font-size: 0.9rem;
  padding-right: 1vw;
}