/* ================================================================================================
KEYFRAMES
================================================================================================ */
@keyframes shake {
2% {
transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
4% {
transform: translate(2.5px, -1.5px) rotate(-0.5deg); }
6% {
transform: translate(2.5px, 0.5px) rotate(1.5deg); }
8% {
transform: translate(-0.5px, 2.5px) rotate(-0.5deg); }
10% {
transform: translate(1.5px, -0.5px) rotate(1.5deg); }
12% {
transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
14% {
transform: translate(0.5px, -1.5px) rotate(0.5deg); }
16% {
transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
18% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
20% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
22% {
transform: translate(1.5px, 1.5px) rotate(0.5deg); }
24% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg); }
26% {
transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
28% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
30% {
transform: translate(1.5px, 0.5px) rotate(0.5deg); }
32% {
transform: translate(1.5px, -0.5px) rotate(0.5deg); }
34% {
transform: translate(2.5px, 1.5px) rotate(-0.5deg); }
36% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg); }
38% {
transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
40% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
42% {
transform: translate(0.5px, 0.5px) rotate(0.5deg); }
44% {
transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
46% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
48% {
transform: translate(1.5px, 1.5px) rotate(1.5deg); }
50% {
transform: translate(0.5px, -0.5px) rotate(0.5deg); }
52% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg); }
54% {
transform: translate(1.5px, -1.5px) rotate(0.5deg); }
56% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
58% {
transform: translate(2.5px, 1.5px) rotate(0.5deg); }
60% {
transform: translate(-0.5px, -0.5px) rotate(1.5deg); }
62% {
transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
64% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
66% {
transform: translate(2.5px, 1.5px) rotate(-0.5deg); }
68% {
transform: translate(2.5px, 0.5px) rotate(1.5deg); }
70% {
transform: translate(-1.5px, -1.5px) rotate(0.5deg); }
72% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg); }
74% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
76% {
transform: translate(1.5px, 1.5px) rotate(0.5deg); }
78% {
transform: translate(1.5px, -0.5px) rotate(1.5deg); }
80% {
transform: translate(-0.5px, 1.5px) rotate(1.5deg); }
82% {
transform: translate(2.5px, 2.5px) rotate(0.5deg); }
84% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg); }
86% {
transform: translate(1.5px, -0.5px) rotate(1.5deg); }
88% {
transform: translate(2.5px, -1.5px) rotate(0.5deg); }
90% {
transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
92% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
94% {
transform: translate(2.5px, 0.5px) rotate(1.5deg); }
96% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
98% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }
@keyframes shake-little {
2% {
transform: translate(0px, 0px) rotate(0.5deg); }
4% {
transform: translate(2px, 2px) rotate(0.5deg); }
6% {
transform: translate(2px, 2px) rotate(0.5deg); }
8% {
transform: translate(2px, 2px) rotate(0.5deg); }
10% {
transform: translate(2px, 0px) rotate(0.5deg); }
12% {
transform: translate(0px, 2px) rotate(0.5deg); }
14% {
transform: translate(0px, 0px) rotate(0.5deg); }
16% {
transform: translate(2px, 2px) rotate(0.5deg); }
18% {
transform: translate(0px, 0px) rotate(0.5deg); }
20% {
transform: translate(2px, 0px) rotate(0.5deg); }
22% {
transform: translate(2px, 2px) rotate(0.5deg); }
24% {
transform: translate(0px, 2px) rotate(0.5deg); }
26% {
transform: translate(0px, 0px) rotate(0.5deg); }
28% {
transform: translate(0px, 0px) rotate(0.5deg); }
30% {
transform: translate(2px, 2px) rotate(0.5deg); }
32% {
transform: translate(2px, 0px) rotate(0.5deg); }
34% {
transform: translate(2px, 0px) rotate(0.5deg); }
36% {
transform: translate(0px, 0px) rotate(0.5deg); }
38% {
transform: translate(2px, 2px) rotate(0.5deg); }
40% {
transform: translate(2px, 2px) rotate(0.5deg); }
42% {
transform: translate(2px, 2px) rotate(0.5deg); }
44% {
transform: translate(2px, 0px) rotate(0.5deg); }
46% {
transform: translate(0px, 0px) rotate(0.5deg); }
48% {
transform: translate(2px, 2px) rotate(0.5deg); }
50% {
transform: translate(2px, 0px) rotate(0.5deg); }
52% {
transform: translate(0px, 0px) rotate(0.5deg); }
54% {
transform: translate(0px, 0px) rotate(0.5deg); }
56% {
transform: translate(2px, 0px) rotate(0.5deg); }
58% {
transform: translate(2px, 2px) rotate(0.5deg); }
60% {
transform: translate(2px, 2px) rotate(0.5deg); }
62% {
transform: translate(2px, 2px) rotate(0.5deg); }
64% {
transform: translate(2px, 2px) rotate(0.5deg); }
66% {
transform: translate(0px, 0px) rotate(0.5deg); }
68% {
transform: translate(2px, 2px) rotate(0.5deg); }
70% {
transform: translate(2px, 0px) rotate(0.5deg); }
72% {
transform: translate(2px, 0px) rotate(0.5deg); }
74% {
transform: translate(2px, 2px) rotate(0.5deg); }
76% {
transform: translate(0px, 2px) rotate(0.5deg); }
78% {
transform: translate(0px, 0px) rotate(0.5deg); }
80% {
transform: translate(0px, 0px) rotate(0.5deg); }
82% {
transform: translate(0px, 0px) rotate(0.5deg); }
84% {
transform: translate(0px, 0px) rotate(0.5deg); }
86% {
transform: translate(2px, 0px) rotate(0.5deg); }
88% {
transform: translate(2px, 2px) rotate(0.5deg); }
90% {
transform: translate(2px, 2px) rotate(0.5deg); }
92% {
transform: translate(2px, 0px) rotate(0.5deg); }
94% {
transform: translate(2px, 0px) rotate(0.5deg); }
96% {
transform: translate(2px, 2px) rotate(0.5deg); }
98% {
transform: translate(2px, 2px) rotate(0.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }
/*=========================== shake end ==============================*/
@keyframes spin {
0% { transform: rotate(0deg); }
0.1% { transform: rotate(-60deg); }
0.2% { transform: rotate(-144deg); }
0.25% { transform: rotate(-252deg); }
0.3% { transform: rotate(-396deg); }
0.35% { transform: rotate(-576deg); }
0.4% { transform: rotate(-792deg); }
0.45% { transform: rotate(-1152deg); }
0.5% { transform: rotate(-1632deg); }
0.6% { transform: rotate(-2352deg); }
0.7% { transform: rotate(-4012deg); }
2.1% { transform: rotate(-56856deg); }
2.2% { transform: rotate(-58514deg); }
2.3% { transform: rotate(-59234deg); }
2.4% { transform: rotate(-59703deg); }
2.5% { transform: rotate(-60063deg); }
2.6% { transform: rotate(-60279deg); }
2.7% { transform: rotate(-60603deg); }
2.8% { transform: rotate(-60711deg); }
100% { transform: rotate(-82656deg); }
}
@keyframes scale-up {
0% { transform: scale(0.5); }
0.5% { transform: scale(0.5); }
1% { transform: scale(2.5); }
2% { transform: scale(2.5); }
2.3% { transform: scale(0.5) translate(200px,-200px); }
100% {  }
}
@keyframes remove-border {
0% {    }
1% {
border-color: rgba(255,255,255,0);
background-color: rgba(255,255,255,0);
}
100% {  }
}
@keyframes fall-header {
0% {
top: 0;
}
0.6% {
opacity: 1;
}
0.7% {
top: 350px;
transform: scale(0) perspective(450px) rotateY(155deg) rotateZ(100deg);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-sharemenu {
0% {}
0.5% {
transform: translate(-100%,0%) rotate(-270deg) scale(0.2);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-search_box {
0% {}
0.4% {
transform: translate(-10%,-500%) rotate(400deg) scale(0);
opacity: 1;
}
0.45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_top_right {
0% {}
0.5% {
transform: translate(45vw,212px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_top_left {
0% {}
0.5% {
transform: translate(-45vw,212px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_bottom_right {
0% {}
0.5% {
transform: translate(45vw,-212px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_bottom_left {
0% {}
0.5% {
transform: translate(-45vw,-312px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-cafemenu {
0% {}
0.7% {
transform: translate(44vw,-42%) rotate(345deg) scale(0.05);
opacity: 1;
}
0.75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-commentDiv {
0% {}
1% {
transform: translate(-6vw,-8vw) rotateX(230deg) rotateY(240deg) scale(0.05);
opacity: 1;
transform-origin: top;
}
1.1% {
opacity: 0;
}
100% { opacity: 0; }
}
@keyframes fall-subject {
0% {}
0.5% {
transform: translate(45vw,190px) rotate(50deg) scale(0.4);
transform-origin: right;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-writer {
0% {}
0.5% {
transform: translate(40vw,180px) rotate(-60deg) scale(0.4);
transform-origin: right;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-url {
0% {}
0.5% {
transform: translate(45vw,180px) rotate(-45deg) scale(0.2);
transform-origin: right;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-comment_cnt {
0% {}
0.5% {
transform: translate(40vw,-82px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-ccl {
0% {}
0.5% {
transform: translate(-44vw,-42px) scale(0.5);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes appear-hos {
0% {    }
0.04% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes fall-paging {
0% {    }
0.5% {
transform: rotate(-45deg) translate(7vw,-400px) scale(0.5);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-minidaum {
0% {    }
0.5% {
transform: rotate(-48deg) translate(-45vw) scale(0.5);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-nickzzal {
0% {    }
0.5% {
transform: translate(387px,22px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.1);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ================================================================================================
STYLE
================================================================================================ */
html {
animation-name: shake;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: 190;
animation-delay: 6.5s;
}
body {
animation-name: shake-little;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: 245;
animation-delay: 3s;
}
.read-content, .content {z-index: 0;}
.content-recommend, .read-recommend {z-index: 3000;}
#header {
z-index: 2000;
}
#title {
overflow: visible;
animation: 1000s fall-header ease-out 8.5s;
}
#shareMenu { z-index: 2000 }
#shareMenu > * {
animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#wrap {
overflow: visible;
}
#csoContainer {
animation: 1000s fall-search_box ease 6s;
z-index: 2000;
}
#GNB_Wrapper {
animation: 1000s fall-list_btn_top_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.preview {
animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#csoContainer22 {
animation: 1000s fall-list_btn_bottom_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.float_right {
animation: 1000s fall-list_btn_bottom_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.con_box h3, .btn_start, .title_dep2 {
animation: 1000s fall-cafemenu linear 7s;
z-index: 2000;
}
#csoMainWrap, .gnbWrapper {
animation: 1000s fall-cafemenu linear 7s;
z-index: 2000;
}
.sub_left, .title_area {
animation: 1000s fall-commentDiv linear 8s;
z-index: 2001;
}
.area-footer, .area-comment-set, .board_tit, .board_con, .board_etc, .board_btn {
animation: 1000s fall-commentDiv linear 8s;
z-index: 2001;
}
#event {
animation: 1000s fall-subject linear 7s;
z-index: 2000;
}
.sub-1depth-1, .read-recommend, .comment_list {
animation: 1000s fall-subject linear 7s;
z-index: 2000;
}
.b_info, .read-bbs-community {
animation: 1000s fall-writer linear 6s;
z-index: 2000;
}
.b_tit {
animation: 1000s fall-url linear 6s;
z-index: 2000;
}
.lnb {
animation: 1000s fall-comment_cnt linear 6s;
z-index: 2000;
}
.b_addr {
animation: 1000s fall-ccl linear 6s;
z-index: 2000;
}
/*.float_right {
animation: 1000s remove-border linear 7s;
}*/
.sub-header, .ui-header, #header, .btn_top_list {
animation: 1000s fall-paging linear 6s;
z-index: 2000;
}
#daum-ad-root-ifrm, .goTop, #footer {
display: none;
}
.area-quick, .area-quick-auth {
animation: 1000s fall-minidaum linear 6s;
z-index: 2000;
}
.sigong div {
width: 300px; height:300px;
min-width: 300px;
top: 0; left: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sigong .sigong_detail1 {
position: absolute;
background-image: url('https://upload.hakase.app/upload/166409316890931613.png');
}
.sigong .sigong_detail2 {
background-image: url('https://upload.hakase.app/upload/166409318163316375.png');
animation: spin 1000s linear infinite;
}
.nickzzal img {
position: absolute;
top: 160px;
max-width: 500px;
z-index: 0;
animation: 1000s fall-nickzzal linear 6s;
}
#user_contents {
overflow: visible !important;
}
.hos {
background-image: url('https://upload.hakase.app/upload/166409579750002772.png');
background-size: contain;
background-position: center;
}
audio {
visibility: hidden;
}
#container {
    background: none !important;
}
/* ================================================================================================
\ubbf8\ub514\uc5b4\ucffc\ub9ac
================================================================================================ */
@media screen and (min-width: 480px) {  /* vw>480px */
.sigong {
position: absolute;
right: 50%;
margin-top: -100px;
animation: scale-up 1000s linear infinite;
z-index: 1000;
}
.hos {
opacity: 0;
animation: 1000s appear-hos linear 23s;
width: 708px;
height: 700px;
position: absolute;
right: 50%;
margin-top: -338px;
margin-right: -255px;
}
}
@media screen and (max-width: 480px) {  /* vw<480px */ @keyframes scale-up { 0% { transform: scale(0.5); } 0.5% { transform: scale(0.5); } 1% { transform: scale(1.2); } 2% { transform: scale(1.2); } 2.5% { transform: scale(0.21) translate(33%,-47%) } 100% { } } @keyframes mobile_comment1 { 0% {} 0.5% { transform: translate(0,-100px) scale(0.4) rotate(-225deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment2 { 0% {} 0.5% { transform: translate(0,-200px) scale(0.4) rotate(-45deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment3 { 0% {} 0.5% { transform: translate(0,-300%) scale(0.4) rotate(70deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment4 { 0% {} 0.5% { transform: translate(0,-400%) scale(0.4) rotate(-80deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment5 { 0% {} 0.5% { transform: translate(0,-500%) scale(0.4) rotate(200deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_subject { 0% {} 1% { transform: translate(0,250px) scale(0.2) rotateX(60deg) rotateY(60deg) rotateZ(360deg); opacity: 1; } 1.05% { opacity: 0; } 100% {} } @keyframes mobile_navi { 0% {} 0.6% { transform: translate(0,350px) scale(0.5) rotate(-145deg); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_tabcafe { 0% {} 0.6% { transform: translate(0,-100px) scale(0.2) rotate(-145deg); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_optionbtn1 { 0% {} 0.6% { transform: translate(-65px,-10px) scale(0.5); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_optionbtn2 { 0% {} 0.6% { transform: translate(-100px,-10px) scale(0.5); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes fall-nickzzal { 0% { } 0.5% { transform: translate(120px,150px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.2); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } html, body { overflow: hidden; } .sigong div { width: 100%; } .sigong { animation: scale-up 1000s linear infinite; width: 100%; z-index: 1000; display: table-cell; } .hos { position: absolute; width: 100%; left: 0; opacity: 0; z-index: -1; animation: 1000s appear-hos linear 23s; } .mobilebox { position: absolute; display: table; top: 0; left: 0; width: 100%; height: 375px; vertical-align: middle; } .list_cmt > li:nth-child(1) { position: relative; animation: 1000s mobile_comment1 linear 6s; z-index: 2000; } .list_cmt > li:nth-child(2) { position: relative; animation: 1000s mobile_comment2 linear 6.4s; z-index: 2000; } .list_cmt > li:nth-child(3) { position: relative; animation: 1000s mobile_comment3 linear 6.8s; z-index: 2000; } .list_cmt > li:nth-child(4) { position: relative; animation: 1000s mobile_comment4 linear 7.2s; z-index: 2000; } .list_cmt > li:nth-child(5) {
position: relative;
animation: 1000s mobile_comment5 linear 7.6s;
z-index: 2000;
}
.navigation {
animation: 1000s mobile_subject linear 10s;
z-index: 2000;
}
#container {
animation: 1000s mobile_navi linear 7s;
z-index: 2000;
background: none !important;
}
#sub_left {
animation: 1000s mobile_tabcafe linear 9s;
z-index: 2000;
position: relative;
}
#lnb {
animation: 1000s mobile_optionbtn1 linear 6s;
z-index: 2000;
position: relative;
}
#content {
animation: 1000s mobile_optionbtn2 linear 6.5s;
z-index: 2000;
position: relative;
}
}