@charset "utf-8";
/* CSS Document */
html, body{
	height:100%;
	
}
@media (max-width: 767px) { 
  html, body{
	font-size:16px
  }
}
@media (min-width: 768px) {
  html, body{
	font-size:20px
  }	
}
 
body{
    font-family: 'Noto Sans KR', sans-serif;
	line-height:1.5;
	color:#2a2a2a;
	overflow-y:scroll;
	overflow-x:hidden;
}
.btn{
	transition: all ease-in-out .8s;
}
.line-height-15{
	line-height:1.5;
}
.btn, button:focus, input:focus, button:active, input:active, .form-control:focus, .form-control:active{
	outline: 0 !important;
	box-shadow: none !important;
}
.btn{
	cursor:pointer;
}
.form-control:focus, .form-control:active{
	border:1px dotted #333333;
}
a:hover{
	color:#dd4e20;
}
.form-control:focus, .form-control:active, .form-select:focus, .form-select:active {
	border:1px dotted #333333;
	outline:0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
 transition: background-color 5000s ease-in-out 0s;
 -webkit-transition: background-color 9999s ease-out;
 -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0) inset !important;
 -webkit-text-fill-color: #a192c9 !important;
}
.color-blue{
	color:#
}
.text-red{
	color:#ff457e
}
.text-yellow{
	color:#ffc000;
}
.text-light-yellow{
	color:yellow;
}
.text-sky{
	color:#18b8ff;
}
.text-green{
	color:#7dbf47;
}
.text-white{
	color:#ffffff;
}
.text-blue{
	color:#5d58f7;
}
.text-orange{
	color:#fb5933;
}
.text-pink{
	color:#ed71a3;
}
.bg-red{
	background-color:#ff457e;
	color:#ffffff
}
.bg-yellow{
	background-color:#ffc000;
	color:#ffffff
}
.bg-sky{
	background-color:#18b8ff;
	color:#ffffff
}
.bg-blue{
	background-color:#5d58f7;
	color:#ffffff
}
.bg-green{
	background-color:#7dbf47;
	color:#ffffff
}
.bg-pink{
	background-color:#ed71a3;
	color:#ffffff;
}
.bg-orange{
	background-color:#fb5933;
	color:#ffffff;
}
.bg-gray{
	background-color:#bfc1d6;
	color:#ffffff;
}
.btn-sky{
	border:0;
	background-color:#18b8ff!important;
	color:#ffffff	
}
.btn-sky:hover{
	border:0;
	background-color:#0b9fe1!important;
	color:#ffffff;
	text-decoration:none;	
}
.btn-yellow{
	border:0;
	background-color:#ffc000;
	color:#ffffff
}

.btn-yellow:hover{
	border:0;
	background-color:#ffa800;
	color:#ffffff;
	text-decoration:none;
}
.btn-red{
	border:0;
	background-color:#ff457e;
	color:#ffffff
}

.btn-red:hover{
	border:0;
	background-color:#de265f;
	color:#ffffff;
	text-decoration:none;
}
.btn-blue{
	border:0;
	background-color:#5d58f7;
	color:#ffffff	
}
.btn-blue:hover{
	border:0;
	background-color:#3e39e3;
	color:#ffffff;
	text-decoration:none;	
}
.btn-green{
	border:0;
	background-color:#7dbf47;
	color:#ffffff	
}
.btn-green:hover{
	border:0;
	background-color:#69ac32;
	color:#ffffff;
	text-decoration:none;	
}
.btn-pink{
	border:0;
	background-color:#ed71a3;
	color:#ffffff	
}
.btn-pink:hover{
	border:0;
	background-color:#d64a82;
	color:#ffffff;
	text-decoration:none;	
}
.btn-orange{
	border:0;
	background-color:#fb5933;
	color:#ffffff	
}
.btn-orange:hover{
	border:0;
	background-color:#e2401a;
	color:#ffffff;
	text-decoration:none;	
}
.h1, h1 {
    font-size: 2.4rem;
}
.custom-control-input:checked~.custom-control-label::before{
	color: #fff;
    border-color: #18b8ff;
    background-color: #18b8ff;;
}
.btn, .custom-checkbox .custom-control-input~.custom-control-label::before, .form-control, .custom-file-label{
	border-radius:0;
}
input[type=checkbox]~.custom-control-label, input[type=radio]~.custom-control-label{
	cursor: pointer;
}
header{
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    z-index: 5;
}
header .barnd-logo{
	width:20%;
	max-width:90px;
}
header .closed{
	width:2rem;
	opacity: 0.7;
}
header .closed:hover{
	width:2rem;
	opacity: 1;
}
.mouse-down{
	position:absolute;
	left:50%;
	margin-left:-22px;
	bottom:1rem;
}
.copyright{
	position:absolute;
	left:0;
	right:0;
	padding:0 1rem;
	bottom:1rem;
	opacity: 0.7;
}
.line-mouse2 {animation:line-mouse2-scroll 2s infinite;}
 @keyframes line-mouse2-scroll {
	 0%{transform:translate3d(0, 0, 0);}
	 50%{transform:translate3d(0, 10px, 0);}
	 100%{transform:translate3d(0, 0, 0);}
 }
 @media (prefers-reduced-motion: reduce) {
	 .line-mouse2 {
		 animation: none;
	 }
 }
.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
  background-attachment: fixed;
}
.background:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.background:first-child {
  background-image: url(../img/about01.jpg);
}
.background:first-child .content-wrapper {
}
.background:nth-child(2) {
    background-image: url(../img/about02.jpg);
}
.background:nth-child(3) {
    background-image: url(../img/about03.jpg);
}

/* Set stacking context of slides */
.background:nth-child(1) {
  z-index: 3;
}

.background:nth-child(2) {
  z-index: 2;
}

.background:nth-child(3) {
  z-index: 1;
}

.content-wrapper {
    height: 100vh;
    display: flex;
    /* flex-flow: column nowrap; */
    color: #fff;
    /* font-family: Montserrat; */
    /* text-transform: uppercase; */
    /* transform: translateY(40vh); */
    /* will-change: transform; */
    /* -webkit-backface-visibility: hidden; */
    backface-visibility: hidden;
    transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
	position: relative;
	z-index: 3;
}
.content-title {
  line-height: 1.4;
  top:25%;
  position:relative;
}
.content-title:before{
	content:'';
	width:5px;
	height:5px;
	position:absolute;
	top:50%;
	margin-top:-3px;
	left:-1rem;
	background-color:rgba(255,255,255,.3);
	border-radius:50%;
	
}
.content-title:after{
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	left: calc(-100% + -1rem);
	background-color: rgba(255,255,255,.3);
}

.wrap-text{
	background-color:#ffffff;
	position:absolute;
	bottom:0;
	left:0;
	top:50%;
	width:100%;
	color:#444444;
	text-align:left;
}		
.background.active h1{
	-webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) .5s both;
	        animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) .5s both;	
}
@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}
@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}
.background:nth-child(2).active h1{
-webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;	
}
@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
.background.active .copy{
	-webkit-animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;	
}
@-webkit-keyframes slide-top {
  0% {
			opacity:0;
  }
  100% {
			opacity:1;
  }
}
@keyframes slide-top {
  0% {
			opacity:0;
  }
  100% {
			opacity:1;
  }
}


@media (max-width: 1920px) {
	h1{
		font-size:calc(13px + 1.4vw);
	}
	h2{
		font-size:calc(13px + 1.2vw);
		line-height:1.4
		}	
	h3{
		font-size:calc(13px + 1vw);
	}
	h3{
		font-size:calc(13px + .9vw);
	}	
}
@media (max-width: 1023px) {
	h1{
		font-size:calc(20px + 2vw);
	}
	h2{
		font-size:calc(18px + 1.5vw);
	}	
	h3{
		font-size:calc(18px + 1.2vw);
	}
	h4{
		font-size:calc(17px + .8vw);
	}	
}
@media (max-width: 991px) {
	h1{
		font-size:calc(22px + 1.9vw);
	}
	h2{
		font-size:calc(21px + 1.7vw);
	}	
	h3{
		font-size:calc(20px + 1.5vw);
	}	
	h3{
		font-size:calc(19px + 1.3vw);
	}	
}	
@media (max-width: 767px) {
	h1{
		font-size:calc(20px + 1.7vw);
	}
	h2{
		font-size:calc(19px + 1.4vw);
	}	
	h3{
		font-size:calc(18px + 1.1vw);
	}	
	h4{
		font-size:calc(17px + .8vw);
	}	
	.wrap-text{
		top:40%;
	}
	
}
@media (max-width: 575px) {
	h1{
		font-size:calc(18px + 1.7vw);
	}
	h2{
		font-size:calc(17px + 1.4vw);
	}	
	h3{
		font-size:calc(16px + 1.1vw);
	}	
	h4{
		font-size:calc(15px + .8vw);
	}
	.wrap-text{
		top:50%;
	}
	.container{
			padding: 0 3rem;
	}	
}