@charset "UTF-8";

:root{
  --hy-point-color:rgb(2,0,36);
  --hy-point-color-opacity-9:rgba(2,0,36,0.9);
  --hy-point-color-opacity-8:rgba(2,0,36,0.8);
  --hy-point-color-opacity-7:rgba(2,0,36,0.7);
  --hy-point-color-opacity-6:rgba(2,0,36,0.6);
  --hy-point-color-opacity-5:rgba(2,0,36,0.5);
  --hy-point-color-opacity-4:rgba(2,0,36,0.4);
  --hy-point-color-opacity-3:rgba(2,0,36,0.3);
  --hy-point-color-opacity-2:rgba(2,0,36,0.2);
  --hy-point-color-opacity-1:rgba(2,0,36,0.1);
  --hy-point-color-opacity-0:rgba(2,0,36,0.0);
}

.point-color{
  color: var(--hy-point-color);
}

.word-break{
  word-wrap:break-word;
}

/* loading */
body{
  -webkit-transition: opacity .4s;
  -moz-transition: opacity .4s;
  -o-transition: opacity .4s;
  transition: opacity .4s;
  opacity:1;
}
.is-loading{
  opacity: 0;
}

/* line */
.hy-line{
  position: relative;
  width: 90%;
  max-width: 900px;
  height: 1px;
  background-color: var(--hy-point-color-opacity-3);
  left: 50%;
  transform: translateX(-50%);
  &::before{
    content: "";
    position: absolute;
    left: 50%;
    width: 10%;
    max-width: 20px;
    height: 1px;
    background-color: var(--hy-point-color-opacity-3);
    transform: translateX(-75%) rotate(-45deg);
  }
  &::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 10%;
    max-width: 20px;
    height: 1px;
    background-color: var(--hy-point-color-opacity-3);
    transform: translateX(-25%) rotate(-45deg);
  }
}
.hy-line.header-line{
  background-color: rgba(255,255,255,0.3);
  &::before{
    background-color: rgba(255,255,255,0.3);
    width: 10%;
    max-width: 20px;
  }

  &::after{
    background-color: rgba(255,255,255,0.3);
    width: 10%;
    max-width: 20px;
  }
}

/* 메인 백그라운드 */
.main-background-container{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.main-background{
  width:100%;
  height: 100%;
  background-image: url("../img/main.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* -webkit-transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1); */
  -webkit-animation: mainImageZoomIn 4s forwards; 
  -moz-animation: mainImageZoomIn 4s forwards; 
  -o-animation: mainImageZoomIn 4s forwards; 
  animation: mainImageZoomIn 4s forwards; 
  /* animation: mainImageZoomIn 8s infinite alternate;  */
  /* animation: mainImageZoomIn 8s forwards;  */
}
@keyframes mainImageZoomIn {
  from { transform: scale(1); }
  to { transform: scale(1.4); }
}
.main-background-container::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* background:#00264b; */
  background: var(--hy-point-color);
  background: linear-gradient(180deg, var(--hy-point-color) 0%, var(--hy-point-color-opacity-4) 20%, var(--hy-point-color-opacity-0) 100%);
}

/* 헤더 로고 이미지 */
header, .header-top{
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  background: rgb(6, 14, 28);
}
.header-top{
  border-bottom: 1px solid #ffffff33;
}

header.active{
  background: rgba(204, 197, 185, 0.8);
}

header.active .header-top{
  background: rgba(64, 61, 57, 0.7);
  border-bottom: 0px;
}

.logo-image{
  width: 40px;
}
@media (min-width: 1200px){
  .logo-image{
    width: 60px;
  }
}

/* 메인 네비게이션 */
.main-nav{
  width:auto;
  background: none !important;
  position:relative;
}
.main-nav a{
  font-weight: normal;
}
.main-nav.active a{
  font-weight: bolder;
}
/* .main-nav.active::after{
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #ffffff;
  border-radius: 50%;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
} */
.main-nav.active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  bottom: 0;
  background-color: #ffffff;
}

.sub-nav{
  width: max-content;
  position:absolute;
  background-color: rgb(6, 14, 28);
  display: none;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.sub-nav li a{
  padding: 4px 30px;
  display: block;
  color:#ffffff;
}

.sub-nav li:hover a, .sub-nav li.active a{
  background-color: rgb(111,107,101);
}

header.active .sub-nav{
  background-color: rgba(204, 197, 185, 0.8);
}

.main-nav:hover .sub-nav{
  display:block;
}


/* 메인 섹션 마우스 애니메이션 */
.mouse-icon-box{
	position: absolute;
  cursor: pointer;
  bottom:30px;
  left: 50%;
  transform: translateX(-50%);
}
.mouse-icon{
	width: 25px;
	height: 45px;
	border: 3px solid var(--hy-point-color);
	/* border: 3px solid #ffffff; */
	border-radius: 30px;
  -webkit-box-shadow: 0 0 10px 1px var(--hy-point-color-opacity-6);
  -moz-box-shadow: 0 0 10px 1px var(--hy-point-color-opacity-6);
  -o-box-shadow: 0 0 10px 1px var(--hy-point-color-opacity-6);
  box-shadow: 0 0 10px 1px var(--hy-point-color-opacity-6);
  
	&::before {content: '';
		width: 8px;
		height: 8px;
		position: absolute;
		top: 5px;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--hy-point-color);
		/* background-color: #ffffff; */
		border-radius: 50%;
		opacity: 1;
		-webkit-animation: wheel 2s infinite;
		-moz-animation: wheel 2s infinite;
		-o-animation: wheel 2s infinite;
		animation: wheel 2s infinite;
	}
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}
@-o-keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}
@-moz-keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}
@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}

/* 중간 컨텐츠 */
.youtube-box {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.youtube-box iframe,
.youtube-box object,
.youtube-box embed {position:absolute; top:0; left:0; width:100%; height:100%;}

/* footer */
footer{
  background-color: #eeeeee;
}


/* .about-background-container{
  width: 100%;
  height: 60vh;
  overflow: hidden;
  position: relative;
}

.about-background{
  width:100%;
  height: 100%;
  background-image: url("../img/about.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  transition:scale 3s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation: mainImageZoomIn 8s forwards; 
  -moz-animation: mainImageZoomIn 8s forwards; 
  -o-animation: mainImageZoomIn 8s forwards; 
  animation: mainImageZoomIn 8s forwards;
} */

.fix-icon-box{
  position:fixed;
  right: 30px;
  bottom:50px;
  z-index:400;
  animation:fixed_animaion 1.8s ease-in-out infinite;
}
.fix-icon-box:hover{
  animation-play-state: paused; 
  -webkit-animation-play-state: paused; 
  -moz-animation-play-state: paused; 
  -o-animation-play-state: paused;
}
.fix-icon{
  cursor: pointer;
  display:block;
  border-radius:16px;
  text-align:center;
  position:relative;
  width:68px;
  height:70px;
  line-height:48px;

  -webkit-transition:all .3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition:all .3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition:all .3s cubic-bezier(0.77, 0, 0.175, 1);
  transition:all .3s cubic-bezier(0.77, 0, 0.175, 1);
}

.fix-icon svg{
  width: 34px;
  height: 34px;
}

.fix-icon.phone-icon{
  background:#189a2e;
  margin-bottom: 20px;
}

.fix-icon.kakao-icon{
  background:#fbcc34;
}

.fix-icon-text{
  position: absolute;
  width: calc(100% + 6px);
  left: -3px;
  line-height: 1;
  font-size: 0.76em;
}
@media (min-width: 600px){
  .fix-icon-text{
    font-size: 0.9em;
  }
}

.phone-icon .fix-icon-text{
  bottom: 14px;
}
.kakao-icon .fix-icon-text{
  bottom: 10px;
}






.page-link{
  color: #222222;
}
.active>.page-link, .page-link.active{
  background: rgba(204, 197, 185, 0.8);
  border-color: rgba(204, 197, 185, 0.8);
}
.page-link:focus{
  box-shadow: 0 0 0 0.25rem rgba(204, 197, 185, 0.25);
  
}

/* 비어있는 공간 */
.empty-box{
  display: table;
  height: 300px;
  width: 100%;
}
.empty-box span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

@keyframes fixed_animaion{
  0%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
  100%{transform:translateY(0);}
}


/*
  말풍선
*/

.cloud-span {
  background-color: rgb(6, 14, 28);
  position: absolute;
  right: 80px;
  top: -10px;
  text-align: center;
  border-radius: 10px;
  animation:fixed_cloud 1.8s 0.5s ease-in-out infinite;
}
.cloud-span span{
  display:table-cell;
  vertical-align:middle;
  width: 160px;
  height: 50px;
  font-size: 0.8rem;
  line-height: 0.9rem;
  color: #ffffff;
}
.cloud-span:after {
  content:"";
  position: absolute;
  right: 70px;
  top: 50px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid rgb(6, 14, 28);
}
@keyframes fixed_cloud{
  0%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
  100%{transform:translateY(0);}
}

@media (min-width: 600px){
  .cloud-span {
    right: 100px;
    top: -10px;
  }
}
@media (min-width: 1200px){
  .cloud-span {
    right: 130px;
    top: 0px;
  }
}

.tag-box{
  font-size: 0;
}
.tag{
  color:#ffffff;
  font-size: 0.7rem;
}
.tag.blue{
  background-color: rgb(116,178,195);
}
.tag.brown{
  background-color: rgb(203,157,119);
}