/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eafffc+0,f0e8ff+100 */
background: #eafffc; /* Old browsers */
background: -moz-linear-gradient(left, #eafffc 0%, #f0e8ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #eafffc 0%,#f0e8ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #eafffc 0%,#f0e8ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eafffc', endColorstr='#f0e8ff',GradientType=1 ); /* IE6-9 */
}
#wrap {
width: 100%;
max-width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
margin-top: 100px;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0; left: 0;
box-sizing: border-box;
padding: 15px;
background:rgb(252, 252, 252);
box-shadow: #ddd 0 0 10px 5px;
}
.logo {
display: inline-block;
background-repeat: none;
background-position: center;
background-image: url("../img/logo.png");
background-size: cover;
font-size: 0;
width: 70px;
height: 70px;
position: fixed;
left: 50%; top: 15px;
transform: translateX(-50%);
border-radius: 50%;
cursor: pointer;
/* 웹사이트로 이동하게..*/
transition: opacity 0.5s;
opacity: 0.8;
}
.logo:hover {
opacity: 1;
}
#welcome {
box-sizing: border-box;
min-width: 70%;
width: 70%;
padding: 180px 10% 50px 10%;
min-height: 82vh;
margin: 0 auto;
background: rgb(252, 252, 252);
box-shadow: #ddd 1px 5px 3px 3px;
transition: all 0.5s ease-in-out;
}
#title-box {
text-align: center;
}
#title-box > div {
margin: 20px 0 auto;
}
#title-box > div:first-child {
margin-top: 0px;
}
#title-box > div:last-child {
margin-bottom: 0px;
}
.title {
font-size: 3.7rem;
font-weight: bolder;
letter-spacing: -0.2rem;
line-height: 5rem;
}
.sec-tit {
font-size: 2.5rem;
font-weight: lighter;
letter-spacing: 0.5rem;
line-height: 3.5rem;
}
.start-wrap {
width: 100%;
position: fixed;
bottom: 120px;
}
.start {
box-sizing: border-box;
width: 50%;
height: 100px;
border-radius: 50px;
padding: 20px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 3rem;
animation: flicker 2.5s infinite;
cursor: pointer;
}
.start:hover {
animation-play-state: paused;
}
.start:active {
animation-play-state: running;
}
#qna {
display: none;
}
#calc {
display: none;
}
#result {
display: none;
}
#footer {
background: rgb(252, 252, 252);
width: 100%;
height: 70px;
box-sizing: border-box;
padding: 15px 30px 0 30px;
font-weight: lighter;
box-shadow: #ddd 0 0 15px 2px;
text-align: center;
}
.highlight {
color: rgb(87, 58, 189);
font-weight: bolder;
}
/* animation */
@keyframes flicker {
0% {background-color: rgba(0, 135, 245, 0.6);}
50% {background-color: rgba(0, 135, 245, 0.9);}
100% {background-color: rgba(0, 135, 245, 0.6);}
}
@-webkit-keyframes flicker {
0% {background-color: rgba(0, 135, 245, 0.6);}
50% {background-color: rgba(0, 135, 245, 0.9);}
100% {background-color: rgba(0, 135, 245, 0.6);}