.logo_main { 
position: relative; width: 500px;
} 
.logo-left #navigation { 
text-align: center !important; 
}
.logo-left #branding, .logo-classic #branding {
display:none !important;
}
.logoM { 
display:block; z-index: 99; position: relative; margin: 0 0 10px;
}
.logo_sub { 
display: block; z-index: 99; position: relative; 
}
.logo_sub > h3 { color:#ffffff !important; font-style:italic !important; font-weight: bold !important; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5) !important; }
body, #page {background: #000000 !important;}
.bmenu li a {text-decoration: inherit;}
.cb-slideshow li div h3 {font-family: "Architects Daughter", sans-serif !important;}
.logo_sub {
font-family: 'GmarketSansMedium', 'notokr-regular', 'Nanum Gothic', 'Nanum Gothic Coding' !important;
color: #eaeaea !important;
font-size: 17px;
}
@media (min-width:1241px) {
#main {
padding: 50px 150px !important;
}
#main > .wf-wrap, #bottom-bar > .wf-wrap, #footer > .wf-wrap {
width: 100% !important;
}
.logo_sub {
margin-left:20px;
}
.logo_main {
margin: 50px 0 0 !important;
}
.logoM img {
-webkit-animation: spinIt 2.2s infinite alternate linear;
animation: spinIt 2.2s linear;
animation-iteration-count: infinite;
animation-direction : alternate;
}
}
@media (min-width:1920px) and (min-height:1080px) {
#wrapper #main .fullwidth-box .fusion-row {
max-width: calc(1440px + 0px) !important;
}
#main {
padding: 100px 200px !important;
}
.logoM img {
min-width: 120% !important;
height: auto;
}
.logo_sub {
font-size: 24px;
}
.bmenu {
width: 300px !important;
}
.bmenu li {
font-size: 24px !important;
}
.bmenu li a {
padding:14px 30px 10px 30px !important;
}
}
@media screen and (max-width:1240px) { 
.logo_main {
margin: 8% auto 6% !important;
} .container_audio {    
margin: 0 auto !important;
left: auto !important;
transform: none !important;
float: none !important;
width: auto !important;
}
.logoM {
width: 100%;
text-align: center;
}
.logoM img{
} 
.bmenu { 
width: 250px !important;
margin:0 auto !important; margin-top:50px !important; 
position: relative;
}
.logo_sub { margin-left: 0px;
text-align: center;
} 
#audioplayer {
display:none !important;
}
#main {
padding: 35px 0 35px 0 !important;
}
}
@media screen and (max-width:600px) {
.logo_main {
width: 260px !important;
height: auto !important;
margin: 0 auto 20px !important;
}
.logo_sub { 
font-size: 16px !important;
}
}
@-webkit-keyframes spinIt {
0% { transform: rotate(-1deg); -webkit-transform: rotate(-1deg) }
100% { transform: rotate(1deg); -webkit-transform: rotate(1deg) }
}
@-moz-keyframes spinIt {
0% { transform: rotate(-1deg) }
100% { transform: rotate(1deg) }
}
@keyframes spinIt {
0% { transform: rotate(-1deg) }
100% { transform: rotate(1deg) }
}.content ul { 
list-style:none !important;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
margin: 0;
padding: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(https://jcolbyl.com/images/home_new/home_5/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0px !important;
left: 0px !important;
color: transparent !important;
background-size: cover !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden !important;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'Kaushan Script', 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif !important;
font-size: 160px;
font-weight: 700;
padding: 35px 30px;
line-height: 120px;
color: rgba(255,255,255, 0.8);
text-shadow: 0 0 20px #999;
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOwahFHKM07aQxAJdGHJL3kU8TooAM9EinKyOkriD5nnaXhsQAq27ygdpFeHfUZT9CnUOIBkNHLVbFrTf1wd7o-I-hajKl6C-AZ7GnZS2E3UyX8-DbjkOOv1vb1ZVzl2ecnpYp6tWFYeA0S3sfINqWbngqKx-QPr_js4Jma7mJeEaMgsuEvxttWxzs0Q/s16000/1.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTSD6U1qy4lwpiqM1edQbeUiMYrShKQePpNoOcLLo9Oo3wTwS0_4k5ToM03qwLQD2OxuuYTVT0B8hrwTccUfAkOd8uJIbkAoNLLT4Rg8S6SAmn55z1BcEhXYAy0x8EQQUqyWAdY8UIDhEwIGxB0TA2USuAvMH75NY_1UE-i2HvWA7-xAojtZhchHTrw/s16000/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIBFJCKFStPYnSeXl1l0CChJGCgG1GAmQTP2HY4sRyrULQfNB9GjVJuxSO4RxC5y4JmAFTOhCa39HURyk3KaBWQ9OUOnGAGYLGtk1C4wktReP4YyhZaHl3yrEzj6DUeDkKnQe-ScjPVDRVXuYEueFkBG50lqBqWTJ0OyBHftnKFGYuxcA2NAElqtXfTg/s16000/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzTJ5RJ3wrUplhieuzgC1gJMFp0bUnyh1TEcySB0Ru56Yo74X5_x7TwucXnwX6ZS8SelI_BuZwZEM_tiSH4G0fsbrOGVzLTc9vv6eZ1N3soA_4mrVqGtWbevnWFe2ItNEbbG4xTLa834yzvB5s1ZkoZdNxGVn85JiJetiZFVpmMExDUNI0Bfzk7Rwbg/s16000/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hnYZ827q6YgtHhqT56brWVtgiEf6v5iAQPLbDT1f60G5M00tB48xEucn6x796u71XmCkOV7-lP3aZCu35kfSnq0_X9ja0gE0fu-ST0C9tv19elYcIK5I3LYJHbx74LuiSsPToiWy40LkBgkVMmSDEVpgYysNykAN4zSogpa2dS5KeyvWy-QwuqheSA/s16000/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBCF3EexRllY39Tm2ksfPijHRjRD2tjp6LJGADGOh9K9Gho1S7_w_IvT19QVfojJ5ue6z8WqVVCdxIarDKmZZsKK_87Gz9dZf3jaQWWZN8fgP_zvmJHeqsIgkq7tUvsbPL85zP45EGptQtdgd8dPOyr_MOZgpORUfS7SAjEkEJeqas3IZygKKVvw9oZw/s16000/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation { 
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation { 
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation { 
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation { 
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
} .no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1280px) { 
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) { 
.cb-slideshow li div h3 { font-size: 50px }
}
@media screen and (max-width: 500px) { 
.cb-slideshow li div h3 { font-size: 35px }
}