@charset "EUC-KR";

.link-icon { width: 3rem; position: relative; display: inline-block; font-weight: 500; color: #ffffff; margin-right: 1.0rem; padding-top: 3rem; }
.link-icon.twitter { background-image: url(/img/icon-twitter.png); background-repeat: no-repeat; }
.link-icon.facebook { background-image: url(/img/icon-facebook.png); background-repeat: no-repeat; } 
.link-icon.kakao { background-image: url(/img/icon-kakao.png); background-repeat: no-repeat; }

.circle{
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #D5D5D5;
	display: inline-block;
}

blockquote:before {
  content: "\201C";
  font-size: 3em;
  font-family: Georgia;
  color: #bcbcbc;
  float: left;
  /*margin: -5px 10px 0px -10px;*/
  margin: -5rem 1rem 0rem -1rem;
}

blockquote:after {
  content: "\201D";
  font-size: 3em;
  font-family: Georgia;
  color: #bcbcbc;
  float: right;
  /*margin: -5px 10px 0px -10px;*/
  margin: 0rem 0rem 0rem 0rem;
}

.shell-btn {
  display: inline-block;
  background: transparent;
  width: 30vw;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  font-style: normal;
  font-size: 2.3rem;
  letter-spacing: 0.3em;
  /*color: rgba(223,190,106,0.7);*/
  color: #DFBE6A;
  border-radius: 0;
  /*padding: 18px 80px 20px;*/
  padding: 1rem 2.2rem 1rem 2.2rem;
  transition: all 0.7s ease-out;
  background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
  background-position: 1% 50%;
  background-size: 300% 300%;
  text-decoration: none;
  margin: 0.625rem;
  border: none;
  border: 1px solid rgba(223,190,106,0.3);
}

.shell-btn:hover {
  color: #fff;
  border: 1px solid rgba(223,190,106,0);
  color: $white;
  background-position: 99% 50%;
  text-decoration: none;
}

article {
  height: 100vh;
}

.shell-body {
  background: #231f20;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arials, sans;
}

.shell-body {  
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}


/*	animation	*/

.fade-out-box {
  display: inline-block;
  padding: 10px;
  animation: fadeout 1s;
  -moz-animation: fadeout 1s; /* Firefox */
  -webkit-animation: fadeout 1s; /* Safari and Chrome */
  -o-animation: fadeout 1s; /* Opera */
  animation-fill-mode: forwards;
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-in-box {
  display: inline-block;
  padding: 10px;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}